使用Vue制作一个简单的计算器

最新推荐文章于 2024-08-07 16:52:27 发布

qq_59866139

最新推荐文章于 2024-08-07 16:52:27 发布

阅读量412

点赞数 11

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_59866139/article/details/140474766

版权

首先我们需要引入vue.js文件并搭建静态网页

在Vue中，v-model可以实现元素的双向绑定，用这个指令可以实现简单的计算器功能

我们给input框和select下拉表单添加v-model指令并赋变量value

<!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="../vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <input type="text" v-model="value1">
    <select v-model="opt">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input type="text" v-model="value2">
    <button @click="operation">=</button>
    <input type="text" v-model="value3">
  </div>
</body>
</html>

<script>
  //创建vue实例化
  let vm = new Vue({
    el: '#app',
    //存放数据给变量赋初值
    data: {
      value1: '',
      value2: '',
      value3: '',
      opt: '',
    },
    //存放方法
    methods: {
      //点击=按钮执行以下代码
      operation() {
        //判断opt中的value是哪一个运算符号执行相关的运算即可
        if (this.opt == '+') {
          //因为type of 判断this.value1后发现value1和value2是
          //字符串类型,所以+运算会拼接字符串,我们需要把他们变成number类型
          this.value3 = Number(this.value1) + Number(this.value2)
        } else if (this.opt == '-') {
          this.value3 = Number(this.value1) - Number(this.value2)
        } else if (this.opt == '*') {
          this.value3 = Number(this.value1) * Number(this.value2)
        } else {
          this.value3 = Number(this.value1) / Number(this.value2)
        }
      }
    }
  })
</script>