Vue练习：计算器

最新推荐文章于 2024-10-31 14:51:07 发布

云舒卷云

最新推荐文章于 2024-10-31 14:51:07 发布

阅读量585

点赞数

分类专栏： Vue.js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_43216714/article/details/121265687

版权

Vue.js 专栏收录该内容

14 篇文章 3 订阅

订阅专栏

本文展示了如何使用Vue.js创建一个基础的计算器应用。通过v-model实现数据双向绑定，用户可以输入两个数，选择运算符，点击等于按钮得到计算结果。代码中包含了加减乘除四种基本运算，并进行了类型转换确保数值计算的准确性。

摘要由CSDN通过智能技术生成

文章目录

- 计算器练习
- - 具体代码
  - 运行代码

计算器练习

需求 :

① : 有三个数 : number1 , number2 , resultNum

② : 通过选择运算符 , 然后计算结果

思路 :

首先 , 这个时候选择数据绑定是非常关键的. 因为值随时都可能改变. 所以必须要用到v-model

具体代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计算器</title>
  <script src="lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <!-- 第一个数 -->
    <input type="text" v-model:value="number1" />

    <!-- 选择运算符 -->
    <select v-model:value="opt">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>

    <!-- 选择第二个数 -->
    <input type="text" v-model:value="number2" />

    <!-- = -->
    <button @click="handlerSum">=</button>

    <!-- 计算结果 -->
    <input type="text" v-model:value="resultNumber" />
  </div>

  <script>
    new Vue({
      el: "#app",
      data: {
        number1: 0,
        number2: 0,
        opt: "+",
        resultNumber: 0
      },
      methods: {
        handlerSum() {
          switch (this.opt) {
            case "+":
              this.resultNumber = parseInt(this.number1) + parseInt(this.number2);
              break;
            case "-":
              this.resultNumber = parseInt(this.number1) - parseInt(this.number2);
              break;
            case "*":
              this.resultNumber = parseInt(this.number1) * parseInt(this.number2);
              break;
            case "/":
              this.resultNumber = parseInt(this.number1) / parseInt(this.number2);
              break;
            default:
              break;
          }
        }
      }
    })
  </script>
</body>

</html>