主要是利用v-model的数据双向绑定
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="util/vue-2.4.0.js"></script>
</head>
<body>
<div id="test">
<input type="text" v-model="n1"/>
<select name="jisuanqi" id="" v-model="rule">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2"/>
<input type="button" value="=" @click="res"/>
<input type="text" v-model="n3"/>
</div>
<script>
var vm1 = new Vue({
el:"#test",
data:{
n1:"",
n2:"",
n3:"",
rule:"+"
},
methods:{
res: function () {
console.log(this.rule);
if (this.rule == "+"){
this.n3 = Number(this.n1) + Number(this.n2);
}
if (this.rule == "-"){
this.n3 = Number(this.n1) - Number(this.n2);
}
if (this.rule == "*"){
this.n3 = Number(this.n1) * Number(this.n2);
}
if (this.rule == "/"){
this.n3 = Number(this.n1) / Number(this.n2);
}
}
}
})
</script>
</body>
</html>
