练习一、用JS语言计算两点之间距离功能

1. 功能描述：在界面建立4个数字输入框分别代表两点的横坐标，纵坐标，点击按钮并计算出相应的距离

2. 主要考点：熟悉math对象中开根号math.sqrt（数值）与平方math.pow（数值，次幂）

3. 框架：elementui

4. 相关代码

<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>

5. 运行截图