vue實(shí)現(xiàn)簡易計(jì)算器的4種方法舉例

更新時(shí)間：2023年09月27日 09:58:30 作者：非必要不輸出

這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)簡易計(jì)算器的4種方法,文中通過代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue覺有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一，使用表達(dá)式實(shí)現(xiàn)計(jì)算器：

1.1，大致內(nèi)容都差不多，兩個(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">
            //這里得type如果寫number，后面的綁定就不用加上“.number”
			<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)簡易計(jì)算器

2.1，HTML代碼定義了一個(gè)輸入和輸出元素，兩個(gè)輸入框，使用下拉框，選擇運(yùn)算符。

2.2，計(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)簡易的計(jì)算器

3.1，<input>提供兩個(gè)輸入值，使用v-model進(jìn)行綁定

加上.number改變數(shù)字類型，要不然會(huì)變成字符串進(jìn)行計(jì)算。

3.2，button1（），當(dāng)按鈕被點(diǎn)擊時(shí)會(huì)執(zhí)行該函數(shù)。函數(shù)中使用了一個(gè)switch語句，根據(jù)opt變量的不同值，分別執(zhí)行加法、減法、乘法或除法，并將結(jié)果賦值給變量num3。

<!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>

四，使用偵聽器（watch）實(shí)現(xiàn)計(jì)算器

4.1，HTML代碼不變，兩個(gè)輸入數(shù)值的輸入框和輸出元素的表單，一個(gè)基礎(chǔ)的vue實(shí)例化。

4.2 ，使用Vue.js的watch屬性來監(jiān)視數(shù)據(jù)的變化。定義了三個(gè)監(jiān)視器函數(shù)，分別監(jiān)視n1，n2和opt屬性。每當(dāng)這些屬性中的任何一個(gè)發(fā)生變化時(shí)，監(jiān)視器函數(shù)將調(diào)用方法來重新計(jì)算結(jié)果，并更新數(shù)據(jù)屬性中的值。

<!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>

總的來說，這些方法能。具體選擇哪種方法取決于個(gè)人喜好和項(xiàng)目需求。計(jì)算屬性適用于簡單的計(jì)算，而監(jiān)視器函數(shù)和方法的組合可以處理更加復(fù)雜的計(jì)算。