輕鬆運用Vue實現加,減,乘,除
阿新 • • 發佈:2020-12-11
引用vue.js
<script src="./js/vue.js"></script>
html部分構造頁面
<div id="app">
<input type="text" v-model="num">
<input type="text" v-model="num1">
<select v-model="opt">
< option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="button" value ="=" @click='outcome'>
<input type="text" v-model="result">
</div>
Vue部分實現功能
<script>
new Vue({
el: '#app',
data: {
num: 0,
num1: 0,
result: 0,
opt: '+'
},
methods: {
outcome() { //計算的函式
switch (this.opt) { //以加減乘除為判斷條件
case '+': //如果加就加賦給結果值
this.result = parseInt(this.num) + parseInt(this.num1);
break;
case '-': //如果減就減賦給結果值
this.result = parseInt(this.num) - parseInt(this.num1);
break;
case '*': //如果乘就乘賦給結果值
this.result = parseInt(this.num) * parseInt(this.num1);
break;
case '/': //如果除就除賦給結果值
this.result = parseInt(this.num) / parseInt(this.num1);
break;
}
}
}
})
</script>
效果圖
加法
減法
乘法
除法