vue.js實現(xiàn)簡單的計算器功能
更新時間：2020年02月22日 14:55:36 作者：JTz666666
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)簡單的計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
使用vue.js來編寫一個簡單的計算器，供大家參考，具體內(nèi)容如下
效果如圖所示：是一個十分簡單的計算器，包含了加減乘除，不是用原生js寫的，而是用vue.js寫的
html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <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="button" value="=" @click="calc" /> <input type="text" v-model="result" /> </div> </body> </html>
js代碼：
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
n1:0,
n2:0,
result:0,
opt:"+"
},
methods:{
//定義計算器算數(shù)的方法
calc(){
switch(this.opt){
case "+":
this.result=parseInt(this.n1)+parseInt(this.n2)
//return this.result
break;
case "-":
this.result=parseInt(this.n1)-parseInt(this.n2)
//return this.result
break;
case "*":
this.result=parseInt(this.n1)*parseInt(this.n2)
//return this.result
break;
case "/":
this.result=parseInt(this.n1)/parseInt(this.n2)
//return this.result
break;
}
}
}
})
</script>
不過在最后我使用了一個swith循環(huán)來設(shè)置這個，還有另一種方法，代碼量更少：
可以把里面的循環(huán)改成：
//這是投機取巧，不要經(jīng)常用 正是開發(fā)中，盡量少用 var codeStr='parseInt(this.n1)'+this.opt+'parseInt(this.n2)' this.result=eval(codeStr)
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇vue 取出v-for循環(huán)中的index值實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
今天小編就為大家分享一篇關(guān)于highCharts提示框中顯示當前時間的方法，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
Vue.js每天必學(xué)之方法與事件處理器，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要為大家介紹了vue中定義全局聲明vscode插件提示找不到問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
Vue MVVM模型與data及methods屬性超詳細講解
MVVM旨在利用WPF中的數(shù)據(jù)綁定函數(shù),通過從視圖層中幾乎刪除所有GUI代碼（代碼隱藏）,更好地促進視圖層開發(fā)與模式其余部分的分離,這篇文章主要介紹了Vue MVVM模型與data及methods屬性2022-10-10
這篇文章主要介紹了Vue如何循環(huán)提取對象數(shù)組中的值,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-11-11
vue2+elementui的el-table固定列會遮住橫向滾動條及錯位問題解決方案
這篇文章主要介紹了vue2+elementui的el-table固定列會遮住橫向滾動條及錯位問題解決方案,主要解決固定列錯位后, 接下來就是把固定列往上提滾動條的高度就不會影響了,需要的朋友可以參考下2024-01-01
手把手帶你使用vue+node作后端連接數(shù)據(jù)庫
為了快速學(xué)習(xí)nodejs制作后端并和數(shù)據(jù)庫進行交互的方法,所以趕緊寫一篇這樣的文章出來,下面這篇文章主要給大家介紹了關(guān)于手把手帶你使用vue+node作后端連接數(shù)據(jù)庫的相關(guān)資料,需要的朋友可以參考下2023-03-03
vue中v-for和v-if不能在同一個標簽使用的最新解決方案
這篇文章主要介紹了vue中v-for和v-if不能在同一個標簽的最新解決方案,這里描述了兩種解決方案，結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue學(xué)習(xí)之常用指令,結(jié)合實例形式詳細分析了vue.js創(chuàng)建實例、常用指令及相關(guān)操作技巧,需要的朋友可以參考下2020-01-01