第一种：使用computed计算属性
1.创建项目，引入vue
<script type="text/javascript" src="js/vue.js" ></script>
2.实例化vue
<div id="app">
</div><script>
var vm = new Vue({
el:"#app",//通过el与div元素绑定
})
</script>
3.写一个下拉框形式的运算符号和定义两个数值并且用v-model与data里的属性双向绑定
<input type="text" v-model.number="number1" />
<select v-model="opt">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model.number="number2" />
4.将运算符号和两个数值放在data里，再运用computed计算属性进行计算
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
number1:0,
number2:0,
opt:"*"
},
computed:{
m2(){
if (this.opt == "+") {
return this.number1 + this.number2;
} else if (this.opt == "-"){
return this.number1 - this.number2;
}else if (this.opt == "*"){
return this.number1 * this.number2;
}else if (this.opt == "/"){
return this.number1 / this.number2;
}
}
}
})
</script>
5.将运算结果放在div里显示出来
结果：{{number1}}{{opt}}{{number2}}={{m2}}
第二种：使用methods方法
1.再新建一个HTML文件和第一种方法的1.2.3.步骤相同，增加了一个button，定义一个名为ji的方法用@click来监听这个事件
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="number1" />
<select v-model="opt">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model.number="number2" /><button @click="ji">计算</button>
<br />
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app"
</script>
2.用methods方法写如何计算
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
number1:0,
number2:0,
jisuan:"",
opt:"+"
},
methods:{
ji:function(){
if(this.opt == "+"){
this.jisuan = this.number1+this.number2
} else if(this.opt == "-"){
this.jisuan = this.number1-this.number2
}else if(this.opt == "*"){
this.jisuan = this.number1*this.number2
}else if(this.opt == "/"){
this.jisuan = this.number1/this.number2
}
}
}
})
</script>
3.将运算结果放在div里显示出来
结果：{{number1}}{{opt}}{{number2}}={{jisuan}}
第三种：使用watch状态监听
1.再新建一个HTML文件和第一种方法的1.2.3.步骤相同
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="number1" />
<select v-model="opt">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model.number="number2" />
<p>结果：{{val}}</p>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
number1: 0,
number2: 0,
opt: "+",
val: "",
}
</script>
2.使用watch写如何计算
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
number1: 0,
number2: 0,
opt: "+",
val: "",
},
watch: {
number1(shu) {
let value = 0;
switch(this.opt) {
case '+':
value = shu + this.number2;
break;
case '-':
value = shu - this.number2;
break;
case '*':
value = shu * this.number2;
break;
case '/':
value = shu / this.number2;
break;
}
this.val = shu + this.opt + this.number2 + "=" + value;
},
number2(shu) {
let value = 0;
switch(this.opt) {
case '+':
value = this.number1 + shu ;
break;
case '-':
value = this.number1 - shu ;
break;
case '*':
value = this.number1 * shu ;
break;
case '/':
value = this.number1 / shu ;
break;
}
this.val = this.number1 + this.opt + shu + "=" + value;
},
opt(shu ) {
let value = 0;
switch(shu ) {
case '+':
value = this.number1 + this.number2;
break;
case '-':
value = this.number1 - this.number2;
break;
case '*':
value = this.number1 * this.number2;
break;
case '/':
value = this.number1 / this.number2;
break;
}
this.val = this.number1 + this.opt + this.number2 + "=" + value;
}
}
})
</script>
第四种：用表达式的方法写
新建一个HTML，引入vue，写一个下拉框形式的运算符号和定义两个数值并且用v-model与data里的属性双向绑定，用v-if判断运算符号进行相应的计算，实例化vue
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="number1" />
<select v-model="opt">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model.number="number2" />
<p v-if="opt=='+'">{{number1}}{{opt}}{{number2}}={{number1+number2}}</h2>
<p v-if="opt=='-'">{{number1}}{{opt}}{{number2}}={{number1-number2}}</p>
<p v-if="opt=='*'">{{number1}}{{opt}}{{number2}}={{number1*number2}}</p>
<p v-if="opt=='/'">{{number1}}{{opt}}{{number2}}={{number1/number2}}</p>
</body>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
number1: 0,
number2: 0,
opt: "+",
}
})
</script>
</html>
效果展示
标签：opt,vue,shu,计算器,value,break,number2,number1,四种 From： https://www.cnblogs.com/cccoop/p/17279052.html