<body>
<div id="app">
<input type="text" name="" id="" v-model="n1" />
<select name="" id="" v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" name="" id="" v-model="n2" />
<input type="button" value="=" @click="calc"/>
<input type="text" value="=" v-model="result" />
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
n1: 0,
n2: 0,
result: 0,
opt: '+',
},
methods: {
calc() {
// 这是投机取巧的方式,正式开发中尽量少用
var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'
this.result = eval(codeStr)
//计算器算数的方法
// 逻辑
// switch (this.opt) {
// case '+':
// this.result = parseInt(this.n1) + parseInt(this.n2)
// break
// case '-':
// this.result = parseInt(this.n1) - parseInt(this.n2)
// break
// case '*':
// this.result = parseInt(this.n1) * parseInt(this.n2)
// break
// case '/':
// this.result = parseInt(this.n1) / parseInt(this.n2)
// break
// }
},
},
})
</script>
</body>
使用v-model
制作一个简易的计算器
v-model
数据双向绑定,V能改变M,M也可以改变V@
是v-on
的缩写,绑定事件机制,会在Vue实例的methods
属性中查找方法