一，使用表達(dá)式實(shí)現(xiàn)計(jì)算器：
兩個(gè)<input>輸入框,使用v-if對(duì)表達(dá)式的運(yùn)算符進(jìn)行切換。
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="num1"/>
<select v-model="opt">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model.number="num2" />
<br />
<div>
<p v-if="opt=='+'">結(jié)果：{{num1+num2}}</p>
<p v-if="opt=='-'">結(jié)果：{{num1-num2}}</p>
<p v-if="opt=='*'">結(jié)果：{{num1*num2}}</p>
<p v-if="opt=='/'">結(jié)果：{{num1/num2}}</p>
</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
num1:0,
num2:0,
opt:"*"
}
})
</script>
</html>二，使用計(jì)算屬性（computed）實(shí)現(xiàn)簡(jiǎn)易計(jì)算器
?HTML代碼定義了一個(gè)輸入和輸出元素，兩個(gè)輸入框，使用下拉框，選擇運(yùn)算符。
計(jì)算屬性根據(jù)選擇的操作符將兩個(gè)數(shù)字進(jìn)行計(jì)算，并將結(jié)果返回給HTML中的輸出元素。當(dāng)用戶更改輸入元素中的值時(shí)，計(jì)算屬性將自動(dòng)重新計(jì)算結(jié)果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>computed</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input id="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="text" v-model="result"/>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
n1:0,
n2:0,
opt:'+'
},
computed:{
result(){
switch (this.opt) {
case '+':
return Number(this.n1) + Number(this.n2);
break;
case '-':
return Number(this.n1) - Number(this.n2);
break;
case '*':
return Number(this.n1) * Number(this.n2);
break;
case '/':
return Number(this.n1) / Number(this.n2);
break;
}
}
}
})
</script>
</body>
</html>三，使用方法（methods）實(shí)現(xiàn)簡(jiǎn)易的計(jì)算器
? ? button1（），當(dāng)按鈕被點(diǎn)擊時(shí)會(huì)執(zhí)行該函數(shù)。函數(shù)中使用了一個(gè)switch語(yǔ)句，根據(jù)opt變量的不同值，分別執(zhí)行加法、減法、乘法或除法，并將結(jié)果賦值給變量num3。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-743834.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="num1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model.number="num2">
<button @click="button1">計(jì)算</button>
<input type="text" v-model.number="num3">
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
num1:0,
num2:0,
num3:0,
opt:'+',
},
methods:{
button1(){
switch(this.opt){
case '+':
this.num3=this.num1 + this.num2;
break;
case '-':
this.num3=this.num1 - this.num2;
break;
case '*':
this.num3=this.num1 * this.num2;
break;
case '/':
this.num3=this.num1 / this.num2;
break;
}
}
}
});
</script>
</html>四，使用偵聽(tīng)器（watch）實(shí)現(xiàn)計(jì)算器?
使用Vue.js的watch屬性來(lái)監(jiān)視數(shù)據(jù)的變化。 定義了三個(gè)監(jiān)視器函數(shù)，分別監(jiān)視n1，n2和opt屬性。每當(dāng)這些屬性中的任何一個(gè)發(fā)生變化時(shí)，監(jiān)視器函數(shù)將調(diào)用方法來(lái)重新計(jì)算結(jié)果，并更新數(shù)據(jù)屬性中的值文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-743834.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>watch</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input id="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="text" v-model="result" />
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
n1:0,
n2:0,
result:null,
opt:'+'
},
methods:{
watch1(){
switch (this.opt) {
case '+':
this.result = Number(this.n1) + Number(this.n2);
break;
case '-':
this.result = Number(this.n1) - Number(this.n2);
break;
case '*':
this.result = Number(this.n1) * Number(this.n2);
break;
case '/':
this.result = Number(this.n1) / Number(this.n2);
break;
}
}
},
watch:{
n1:function(){
this.watch1()
},
n2:function(){
this.watch1()
},
opt:function(){
this.watch1()
}
},
created(){
this.watch1()
}
})
</script>
</body>
</html>
到了這里，關(guān)于用VUE實(shí)現(xiàn)計(jì)算器四種方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
