Vue計算器是一個基于Vue.js框架的計算器程序,它可以進行基本的數學運算,如加,減,乘,除等。
要開始創建Vue計算器,我們首先需要在HTML文件中添加Vue.js庫:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
然后,我們需要在HTML文件中創建一個容器,用于將Vue實例掛載到其中:
<div id="calculator"></div>
接下來,我們需要定義Vue實例,并使用計算屬性來對輸入的數字進行計算。以下是Vue計算器的完整代碼實現:
<script>
new Vue({
el: '#calculator',
data: {
number1: null,
number2: null,
operator: null,
result: null
},
computed: {
calculation: function () {
if (this.operator === '+') {
this.result = this.number1 + this.number2;
} else if (this.operator === '-') {
this.result = this.number1 - this.number2;
} else if (this.operator === '*') {
this.result = this.number1 * this.number2;
} else if (this.operator === '/') {
this.result = this.number1 / this.number2;
}
return this.result;
}
}
});
</script>
以上代碼首先定義了Vue實例并通過data選項定義了四個狀態:number1,number2,operator和result。然后,定義了一個計算屬性calculation用于對輸入的數字進行計算。在計算屬性內部,我們使用if語句來判斷操作符,并根據相應的操作符對兩個數字進行計算并返回結果。
最后,我們在HTML文件中添加相應的輸入框和按鈕,用于接收用戶的輸入,并將Vue實例掛載到之前定義的容器中:
<div id="calculator">
<input type="number" v-model="number1">
<input type="number" v-model="number2">
<select v-model="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<button @click="calculation">Calculate</button>
<span>Result: {{result}}</span>
</div>
以上代碼聲明了兩個輸入框,一個下拉選擇框和一個計算按鈕。當用戶點擊計算按鈕時,調用計算屬性calculation并在頁面上顯示結果。
上一篇html常用代碼hide
下一篇vue c 使用