开发者学堂课程【Vue.js 入门与实战：使用 v-model 实现计算器的案例】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8136
使用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>
