使用vue，计算属性等完成计算器

最新推荐文章于 2024-01-05 14:23:06 发布
最新推荐文章于 2024-01-05 14:23:06 发布
阅读量96 收藏
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74167439/article/details/129917865
版权

引入vue文件

e9df63f7dffb4d5290d774c71230d4b0.png

 

先用v-model指令将输入框与数据属性绑定在一起，再用双花括号语法将其显示出来。

b1b81f49c7284af6a84d7648458bdfe5.png

创建一个 Vue 实例，定义数据属性，并重新定义选择数据计算属性。

c9dae9a3b4db4fe8935c78ec1b9a131b.png

 0c7c86df85db48169998d50f64c49dcf.png

 效果图如下：58e6065acd904dd1b74cf0bc9fa88082.png

完整代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.  <head>
  5.   <meta charset="utf-8" />
  6.   <title></title>
  7.   <script type="text/javascript" src="js/vue.js"></script>
  8.  </head>
  9.  
  10.  <body>
  11.   <div id="app">
  12.    <input type="text" placeholder="输入第一个数" v-model.number="num1">
  13.    <select v-model="sign">
  14.     <option>+</option>
  15.     <option>-</option>
  16.     <option>*</option>
  17.     <option>/</option>
  18.    </select>
  19.    <input type="text" placeholder="输入第二个数" v-model.number="num2"> <br> 答案:{{res}} <br>
  20.    <input type="text" placeholder="输入第一个数" v-model.number="num3">
  21.    <select v-model="sign1">
  22.     <option>+</option>
  23.     <option>-</option>
  24.     <option>*</option>
  25.     <option>/</option>
  26.    </select>
  27.    <input type="text" placeholder="输入第二个数" v-model.number="num4"> <br> 答案:{{res1}} <br>
  28.    <input type="text" placeholder="输入第一个数" v-model.number="num5" @change="change">
  29.    <select v-model="sign2" @change="change">
  30.     <option>+</option>
  31.     <option>-</option>
  32.     <option>*</option>
  33.     <option>/</option>
  34.    </select>
  35.    <input type="text" placeholder="输入第二个数" v-model.number="num6" @change="change"> <br> 答案:{{res2}}
  36.   </div>
  37.   <script>
  38.    const vm = new Vue({
  39.     el: "#app",
  40.     data: {
  41.      num1: 0,
  42.      num2: 0,
  43.      sign: "+",
  44.      num3: 0,
  45.      num4: 0,
  46.      sign1: "+",
  47.      res1: "",
  48.      num5: 0,
  49.      num6: 0,
  50.      sign2: "+",
  51.      res2: ""
  52.     },
  53.     methods: {
  54.      change() {
  55.       if(this.sign2 === "+") {
  56.        this.res2 = this.num5 + this.num6;
  57.       } else if(this.sign2 === "-") {
  58.        this.res2 = this.num5 - this.num6;
  59.       } else if(this.sign2 === "*") {
  60.        this.res2 = this.num5 * this.num6;
  61.       } else if(this.sign2 === "/") {
  62.        this.res2 = this.num5 / this.num6;
  63.       }
  64.      }
  65.     },
  66.         computed: {
  67.      res() {
  68.       if(this.sign === "+") {
  69.        return this.num1 + this.num2;
  70.       } else if(this.sign === "-") {
  71.        return this.num1 - this.num2;
  72.       } else if(this.sign === "*") {
  73.        return this.num1 * this.num2;
  74.       } else if(this.sign === "/") {
  75.        return this.num1 / this.num2;
  76.       }
  77.      }
  78.     },
  79.     watch: {
  80.      num3(val) {
  81.       if(this.sign1 === "+") {
  82.        this.res1 = val + this.num4;
  83.       } else if(this.sign1 === "-") {
  84.        this.res1 = val - this.num4;
  85.       } else if(this.sign1 === "*") {
  86.        this.res1 = val * this.num4;
  87.       } else if(this.sign1 === "/") {
  88.        this.res1 = val / this.num4;
  89.       }
  90.      },
  91.      num4(val) {
  92.       if(this.sign1 === "+") {
  93.        this.res1 = this.num3 + val;
  94.       } else if(this.sign1 === "-") {
  95.        this.res1 = this.num3 - val;
  96.       } else if(this.sign1 === "*") {
  97.        this.res1 = this.num3 * val;
  98.       } else if(this.sign1 === "/") {
  99.        this.res1 = this.num3 / val;
  100.       }
  101.      },
  102.      sign1(val) {
  103.       if(val === "+") {
  104.        this.res1 = this.num3 + this.num4;
  105.       } else if(val === "-") {
  106.        this.res1 = this.num3 - this.num4;
  107.       } else if(val === "*") {
  108.        this.res1 = this.num3 * this.num4;
  109.       } else if(val === "/") {
  110.        this.res1 = this.num3 / this.num4;
  111.       }
  112.      }
  113.     }
  114.    })
  115.   </script>
  116.  </body>
  117. </html>
烦。。
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中“组件”知识总结
shdjjsns的博客
08-11 243
目录组件组件的复用组件的注册组件名放置限制通过 Prop 向子组件传递数据单向数据流poro的验证属性继承自定义事件插槽动态组件Provide / Inject异步组件 组件 在项目中，很多时候我们需要在不同的模块使用相同的一个块，而这个块的代码时相同的，这时候会造成代码冗余，我们可以通过封装组件的方式，实现代码的复用。 首先我们来看一个例子： //计数器组件 <template> <p>{{count}}</p> <button @click="c
使用 Vue 方法，计算属性，监听器完成简易计算器
zhlong666的博客
04-02 170
Vue利用计算属性和侦听属性实现简易计算器
使用Vue完成加减乘除运算
qct2345的博客
04-02 64
接下来我们在id为"app"的div下面或者body的下面创建一个script，定义一个Vue方法并且绑定id为"app"的div。然后在body里面创建一个div并设置id，我这里给id命名为"app"把写的3种方法分别绑定对应的input标签和select标签最后运行。然后为每个input标签和select标签设置对应的data属性。在id命名为"app"的div内使用input标签和。工具： HBuilder X。首先在工具内引入vue.js。js插件：vue.js。
Vue｜计算属性
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
03-13 2301
在模板中放入太多的逻辑会让模板过重且难以维护，对于一些比较复杂和特殊的计算有可能就捉襟见肘，一文快速了解VUE的计算属性原理及实现方式提高代码可读性。
vue基础一（模板语法，事件绑定，表单输入绑定，计算属性，侦听器）
qq_48192192的博客
10-19 682
vuevue简介mvvm模式组件化安装和使用在HTML中在node中为什么要把data对象变成函数并return关于vue3的根节点生命周期 vue简介 vue是一套用于构建用户界面的渐进式框架。 Vue 被设计为可以自底向上逐层应用。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 Vue 也完全能够为复杂的单页应用提供驱动。 mvvm模式 MVVM包括view视图层、model数据层、viewmodel层。各部分通信都是双向的。采用双向数据绑定，View的变动，自动反映在
使用Vue实现简单计算器
12-28
使用Vue编写简单计算器，供大家参考，具体内容如下 在Vue中，v-model 指令，可以实现表单元素和 Model 中数据的双向数据绑定，接下来，我们就用这个指令编写一个简单的计算器，代码如下 <!DOCTYPE html> <...
vue-calculator:使用Vue 2的简单计算器
05-06
Vue实例的数据属性，如`displayValue`，可以用来存储计算器的当前显示值，而方法（如`add`, `subtract`, `multiply`, `divide`等）则负责执行具体的数学运算。 Vue的指令如`v-bind`（简写为`:`)和`v-on`（简写为`@`...
Vue实现计算器计算效果
10-14
在本文中，我们将探讨如何使用Vue.js框架来实现一个基本的计算器应用。Vue.js是一个轻量级的前端JavaScript框架，它提供了数据绑定和组件化的能力，使得构建用户界面变得更为简单。下面我们将详细讲解实现计算器的...
Vue.js实现立体计算器
10-15
在本教程中，我们将探讨如何使用Vue.js框架创建一个立体计算器。Vue.js是一个轻量级的前端JavaScript框架，它提供了一种声明式的数据绑定和组件化的方法，使得构建用户界面更加简单高效。在这个项目中，我们将利用...
vue项目使用bignumber.js实现大数相加
最新发布
sun~的博客
01-05 944
【代码】vue项目使用bignumber.js实现大数相加。
BigNumber（加，减，乘，除）运算
sunluyi的博客
07-07 2258
BigNumber（加，减，乘，除）运算
实验1 Vue3项目案例——简易计算器
boxuestudio的博客
02-16 2560
vue3+typescript+vite 简单计算器
Vue3的可写计算属性
Qyzcxy的博客
03-20 440
计算属性默认是只读的。当你尝试修改一个计算属性时，你会收到一个运行时警告。现在当你再运行 fullName.value = 'John Doe' 时，setter 会被调用而 firstName 和 lastName 会随之更新。不要在 getter 中做异步请求或者更改 DOM。Getter 不应有副作用。避免直接修改计算属性值。
使用Vue三种方法实现简单计算器
2201_75939414的博客
04-02 3412
4:Vue.js使用@click指令绑定一个点击事件，并调用pd()方法，根据用户输入的数字和操作符计算结果，并将结果保存到result变量中。使用v-model指令将result变量的值绑定到结果显示输入框中，从而实现实时更新结果。代码实现了一个简单的计算器，用户可以在输入框中输入两个数字，选择一个操作符，并点击“等于”按钮，Vue.js会根据用户的输入进行计算，并将结果显示在另一个输入框中。2:methods属性中定义了一个方法pd()，用于根据用户的输入计算结果，并将结果保存到result变量中。
vue实现简易计算器的四种方法
m0_67477217的博客
04-01 2650
这些方法都是基于Vue.js框架实现的，并且都能够实现计算器应用程序的功能。具体选择哪种方法取决于个人喜好和项目需求。计算属性适用于简单的计算，而监视器函数和方法的组合可以处理更加复杂的计算。
vue中用v-modle绑定input来实现百分比的计算
m0_71933288的博客
02-27 1902
vue v-modle绑定数据进行百分比计算
Vue 模板语法 插值操作 绑定属性 计算属性 事件监听 条件判断 循环遍历 阶段案例
有勇气的牛排博客
11-15 1261
Vue是一个用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设定为能够由底往上，逐层应用。其不仅语法简单，而且易于与其他第三方项目集成。在单页应用程序上仍能提供强大的支持也就是双大括号 {{ }} 1.2 v-once 该指令后面不需要跟任何表达式（比如之前的v-for后面是跟表达式的）该指令表示元素和组件（组件后面才会学习）只会渲染一次，不会随着数据的改变而改变 1.3 v-html 某些情况下，我们从服务器请求到的数据本身就是一个HTML代码如果我们直接通过{{ }} 来输出，会将
Vue利用计算属性和侦听属性实现简易计算器
qq_34466755的博客
06-24 1829
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue-router.js" type="text/javascript
vue3 实现 计算器案例
前端开发小白9527
03-24 2728
注：功能并不完整，主要练习vue3的书写方式 <template> <h3 class="title">计算器</h3> <div class="MyComputed"> <div class="result"> <div class="text"> <el-tag type="" v-model="result">{{ result }}</el-tag>
在Hello Vue组件中利用计算机属性制作简易计算器
06-09
然后，在模板中，你可以使用 v-model 指令绑定输入框的值，并使用 v-on 指令绑定按钮的点击事件，将用户输入的值和操作符传递给计算属性，最后将计算结果显示出来。代码如下： ```html <option value="+">+...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值