使用v-model实现计算器的案例
目录
一、使用v-model实现计算器
二、代码
一、使用v-model实现计算器
创建界面，第一步input，创建数据绑定n1并使用v-model，接下来创建select框，option加减乘除4个选项，再创建一个input，创建数据绑定n2并使用v-model，再创建一个button和result。刷新浏览，可以看到这三个框绑定了n1、n2、result。
首先要在data定义这三个属性：data: {n1:0,n2:0,result:0}。
可以看到算术符号也属于表单元素，添加操作符option（这里简写为opt）v-model绑定到data，默认为加号。
为了使等号有一个计算的方法，需要增加触发@click=＂calc＂的方法，在data有一个平级methods，添加switch(this.opt){case ‘+’:}，由于n1或者n2有可能是字符串，所以添加this.result = parseInt(this.n1) + parseInt(this.n2)。
这样应用逻辑就完成了，只要点击就会触发calc计算，计算完成之后就会重新给result赋值。那么model被修改了，所以model元素也被修改了，vm会自动同步到页面中去。
刷新浏览可以查看计算.
有个投机取巧的方式：有个函数叫eval，它能把字符串解析执行，然后拿到执行结果。
添加var codeStr = ‘parseInt(this.n1)’ + this.opt + ‘parseInt(this.n2)’这样得到字符串代码，然后把这个字符串代码用eval解析，就会执行。
解析的结果就反回result。
注意：
这个方法是投机取巧的，在将来项目里面发现其他方法都很麻烦时可以用一下，尽量少用。
二、代码
<head>
<meta charset="UPr-8">
<meta name="viewport" content="width=device-width，initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src=" . /lib/vue-2.4.0.js"></script>
</head>
<body>
<div id=”app”>
<input type=”text” v-model=”n1”>
<select v-model=”opt”>
<option value="+">+</option>
<option value="-">-</ option>
<option value="*">*</ option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click=”calc”>
imput type="text" v-model="result">
</div>
<script>
//创建vue 实例，得到ViewMode1
var vm= new vue ({
el: ‘#app’,
data: {
n1:0,
n2:0,
result:0,
opt: ‘+’
},
methods: {
calc(){ //计算器算数的方法
//逻辑：
/* 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;
} */
//注意：这是投机取巧的方式，正式开发中，尽量少用
var codeStr = ‘parseInt(this.n1)’ + this.opt + ‘parseInt(this.n2)’
this.result = eval(codeStr)
}
}
｝）；
</script>
</body>
