screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <h4>Vue Js Calculate Midpoint b/w two point</h4> <div id="app"> <div> <label>Point 1 X:</label> <input type="number" v-model="point1.x"> </div> <div> <label>Point 1 Y:</label> <input type="number" v-model="point1.y"> </div> <div> <label>Point 2 X:</label> <input type="number" v-model="point2.x"> </div> <div> <label>Point 2 Y:</label> <input type="number" v-model="point2.y"> </div><br> <div> <button @click="calculateMidpoint">Calculate</button> </div> <div v-if="midpoint"> <p>Midpoint X: {{ midpoint.x }}</p> <p>Midpoint Y: {{ midpoint.y }}</p> </div> </div> <script type="module"> const app = Vue.createApp({ data() { return { point1: { x: 1, y: 2 }, point2: { x: 3, y: 4 }, midpoint: null }; }, methods: { calculateMidpoint() { const { point1, point2 } = this; const midpoint = { x: (point1.x + point2.x) / 2, y: (point1.y + point2.y) / 2 }; this.midpoint = midpoint; } } }); app.mount('#app'); </script> </body> </html>