计算器功能:
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键盘事件，实现实时更新计算结果的功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--当键盘按下或者鼠标点击时触发getResult事件-->
<input id="input" type="number" v-model="num1" @keyup="getResult" @click="getResult" />
<select v-model="selected" @click="getResult">
<option value ="">请选择</option>
<option value ="+">+</option>
<option value ="-">-</option>
<option value ="*">*</option>
<option value ="/">/</option>
<option value ="%">%</option>
</select>
<input type="number" v-model="num2" @keyup="getResult" @click="getResult"/>
<input type="text" v-model="result" onfocus="this.blur()" />
</div>
<script type="text/javascript">
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() //如果设定了初值，计算该表达式的结果
}
})
</script>
</body>
</html>
二、通过computed计算属性
将计算结果设定为一个computed计算属性，该属性与两个表单中的数字相关联，每当数字发生改变自动计算出结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input id="input" type="number" v-model="num1" placeholder="请输入数字" />
<select v-model="selected">
<option value ="">请选择</option>
<option value ="+">+</option>
<option value ="-">-</option>
<option value ="*">*</option>
<option value ="/">/</option>
<option value ="%">%</option>
</select>
<input type="number" v-model="num2" placeholder="请输入数字"/>
<input type="text" v-model="result" onfocus="this.blur()" placeholder="请输入完整的表达式"/>
</div>
<script type="text/javascript">
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和模板字符串计算表达式的值
}
}
})
</script>
</body>
</html>
eval(${this.num1}${this.selected}(${this.num2}))这里this.num2一定要加括号，否则num2为负值时运算会报错。
三、使用watch侦听属性
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。
每当侦听的属性发生改变时，vue会执行该属性对应的函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input id="input" type="number" v-model="num1" placeholder="请输入数字" />
<select v-model="selected">
<option value ="">请选择</option>
<option value ="+">+</option>
<option value ="-">-</option>
<option value ="*">*</option>
<option value ="/">/</option>
<option value ="%">%</option>
</select>
<input type="number" v-model="num2" placeholder="请输入数字"/>
<input type="text" v-model="result" onfocus="this.blur()" placeholder="请输入完整的表达式"/>
</div>
<script type="text/javascript">
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()
}
})
</script>
</body>
</html>
243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
