一.建立一个新的项目
二.引入js
三.建立一个div并且创建实例化对象
四.建立输入框并且设定四个可选的操作符，通过使用placeholder属性提供可描述输入字段预期值的提示信息，代码实现效果如下：
五.用v-moderl属性实现双向绑定的效果（v-moder.number用来将用户的输入值转为数值类型）
六.建立一个按钮，用@click方法实现点击事件，并输入结果
七.用switch方法实现监听事件，并用case属性用来捕捉操作符实现四个可选的标点符号，代码和最终实现效果如下：
加法
减法
乘法
除法
最终完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" placeholder="请输入第一个数" v-model.number="number1">
<select v-model="option">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" placeholder="请输入第二个数" v-model.number="number2">
<button @click="change">计算</button><br />
结果:{{result}}
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
number1:"",
number2:"",
option:"",
result:""
},
methods: {
change() {
switch(this.option){
case"+":
this.result = this.number1 + this.number2;
break;
case"-":
this.result = this.number1 - this.number2;
break;
case"*":
this.result = this.number1 * this.number2;
break;
case"/":
this.result = this.number1 / this.number2;
break;
}
}
}
})
</script>
</html>