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

akatsuki七

于 2023-03-19 20:25:29 发布

阅读量503

点赞数

本文链接：https://blog.youkuaiyun.com/Ak47a7/article/details/129655718

版权

个人练习专栏收录该内容

10 篇文章

订阅专栏

该文描述了一个基于ElementUI框架的Vue.js应用，用户可以输入两个点的横纵坐标，点击按钮后，应用利用JavaScript的math.sqrt和math.pow方法计算并显示这两个点之间的欧氏距离。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能描述：在界面建立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>

运行截图