1、简易计算器我用到了watch监听事件，或者只用methods定义事件也可以完成
2、效果
切换+ - * / 都可以实现运算
3、代码（vue.js记得修改地址目录）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简易计算器</title>
<!-- 引入vue.js -->
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num.num2" />
<select v-model="num.select" />
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model="num.num3" />
<button>=</button>
<!-- 计算结果 -->
<span>{{num.n}}</span>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
"num": {
num2: 0,//第一个数字
num3: 0,//第二个数字
n: 0,//结果
select: "+",//运算符
}
},
methods: {
// 计算结果
// calc(){
// // eval把字符串当js代码执行一遍
// this.n = eval(this.num2 +this.select+"("+this.num3+")");
// }
},
watch: {
// 监听data的变化
"num": {
// 执行handler
handler(nval) {
this.num.n = eval(this.num.num2 + this.num.select + this.num.num3);
},
deep: true
}
}
})
</script>
</body>
</html>
445
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
