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

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

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

一，使用表達式實現(xiàn)計算器：

1.1，大致內容都差不多，兩個<input>輸入框,使用v-if對表達式的運算符進行切換。

<!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=='+'">結果：{{num1+num2}}</p>
				<p v-if="opt=='-'">結果：{{num1-num2}}</p>
				<p v-if="opt=='*'">結果：{{num1*num2}}</p>
				<p v-if="opt=='/'">結果：{{num1/num2}}</p>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				num1:0,
				num2:0,
				opt:"*"
			}
		})
	</script>
</html>

二，使用計算屬性（computed）實現(xiàn)簡易計算器

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

2.2，計算屬性根據(jù)選擇的操作符將兩個數(shù)字進行計算，并將結果返回給HTML中的輸出元素。當用戶更改輸入元素中的值時，計算屬性將自動重新計算結果。

<!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）實現(xiàn)簡易的計算器

3.1，<input>提供兩個輸入值，使用v-model進行綁定

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

3.2，button1（），當按鈕被點擊時會執(zhí)行該函數(shù)。函數(shù)中使用了一個switch語句，根據(jù)opt變量的不同值，分別執(zhí)行加法、減法、乘法或除法，并將結果賦值給變量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">計算</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）實現(xiàn)計算器

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

4.2 ，使用Vue.js的watch屬性來監(jiān)視數(shù)據(jù)的變化。定義了三個監(jiān)視器函數(shù)，分別監(jiān)視n1，n2和opt屬性。每當這些屬性中的任何一個發(fā)生變化時，監(jiān)視器函數(shù)將調用方法來重新計算結果，并更新數(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>

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