Vue利用计算属性和侦听属性实现简易计算器

2024-07-03 05:45| 来源: 网络整理| 查看: 265

计算器功能:

1.加减乘除模可以随意切换使用表单元素< seclect >

2.当输入框中数字改变时实时得出运算结果方法1：v-model绑定input框的值，绑定input键盘按下和鼠标点击时触发自定义方法getResult，该方法用来计算表达式的值。方法2：使用computed计算属性方法3：使用watch侦听属性

3.可以使用上下按钮调节数字大小使用input 属性 type=“number”

4.结果框禁止输入 input添加事件οnfοcus=“this.blur()”

一、利用原生JS事件

通过methods中自定义方法，然后在input表单上通过v-on绑定keyup键盘事件，实现实时更新计算结果的功能。

请选择 + - * / % var vm = new Vue({ el:'#app', data:{ num1:0,//第一输入框中的数字 num2:0,//第二输入框中的数字 result:null,//计算结果 selected:''//默认选择的运算符可以设置为 '','+','-','*','/','%' }, methods:{ //计算表达式num1 (+ or - or * or / or %) num2 的值 getResult(){ if(this.selected === '') //未选择运算符时跳过运算 return var str = this.num1 + this.selected + this.num2;//拼接表达式 this.result = eval(str);//使用eval计算表达式的值 } }, created:function(){ this.getResult() //如果设定了初值，计算该表达式的结果 } }) 二、通过computed计算属性

将计算结果设定为一个computed计算属性，该属性与两个表单中的数字相关联，每当数字发生改变自动计算出结果。

请选择 + - * / % var vm = new Vue({ el:'#app', data:{ num1:0,//第一输入框中的数字 num2:0,//第二输入框中的数字 selected:''//默认选择的运算符可以设置为 '','+','-','*','/','%' }, computed:{ result:function(){ if(this.selected === '' || this.num1=='' || this.num2 =='') //表达式不完整时跳过运算 return null return eval(`${this.num1}${this.selected}(${this.num2})`)//使用eval和模板字符串计算表达式的值 } } })

eval(${this.num1}${this.selected}(${this.num2}))这里this.num2一定要加括号，否则num2为负值时运算会报错。

三、使用watch侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。每当侦听的属性发生改变时，vue会执行该属性对应的函数。

请选择 + - * / % var vm = new Vue({ el:'#app', data:{ num1:0, num2:0, result:null, selected:'' }, methods:{ //求出计算结果的方法 com:function(){ //当表达式不完整时停止运算 if(this.selected === '' || this.num1=='' || this.num2==''){ this.result = null return } this.result = eval(`${this.num1}${this.selected}(${this.num2})`) } }, watch:{ //如果num1发生改变，下面的函数就会运行 num1:function(){ this.com() }, //如果num2发生改变，下面的函数就会运行 num2:function(){ this.com() }, //如果selected发生改变，下面的函数就会运行 selected:function(){ this.com() } }, created(){ this.com() } })

【本文地址】

公司简介

联系我们