功能描述：在界面建立4个数字输入框分别代表两点的横坐标，纵坐标，点击按钮并计算出相应的距离
主要考点：熟悉math对象中开根号math.sqrt（数值）与平方math.pow（数值，次幂）
框架：elementui
相关代码
<template>
<div class="stylebg">
<h1>计算两点之间距离公式</h1>
<div class="inputView">
第一个坐标：
<el-input type="number" v-model="first_X"></el-input>
<el-input type="number" v-model="first_Y"></el-input>
</div>
<div class="inputView">
第二个坐标：
<el-input type="number" v-model="second_X"></el-input>
<el-input type="number" v-model="second_Y"></el-input>
</div>
<div>
<el-button @click="count">计算</el-button>
</div>
<div class="inputView">
距离为：<span>{{dis}}</span>
</div>
</div>
</template>
<script>
export default {
data(){
return{
first_X:'',
second_X:'',
first_Y:'',
second_Y:'',
//距离值
dis:''
}
},
methods:{
count(){
console.log('=================',Math.pow(this.first_X - this.second_X,2),Math.pow(this.first_Y - this.second_Y,2))
this.dis = Math.sqrt(Math.pow(this.first_X - this.second_X,2) + Math.pow(this.first_Y - this.second_Y,2))
}
}
}
</script>
<style scoped>
.inputView >>> .el-input__inner{
width: 20%;
}
</style>
运行截图
