Vue實現(xiàn)簡易計算器
更新時間：2020年02月25日 08:10:50 作者：CodingIsNotEasy
這篇文章主要為大家詳細介紹了用Vue制作的簡易計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue實現(xiàn)簡易計算器的具體代碼，供大家參考，具體內(nèi)容如下
<html>
<body>
<div id="demo">
<h2>簡單加減乘除計算器</h2>
<p>請輸入第一個數(shù)：<input type="text" v-model="firNum"></p>
<p>請輸入第二個數(shù)：<input type="text" v-model="secNum"></p>
<p>
<button @click="plus">+</button>
<button @click="dec">-</button>
<button @click="multiple">x</button>
<button @click="devise">/</button>
</p>
<p>計算結(jié)果：<span v-text="result"></span></p>
</div>
<script>
var v = new Vue({
el:"#demo",
data:{
firNum:"",
secNum:"",
result:""
},
methods:{
plus:function () {
// this.result = this.firNum + this.second; //這樣只是字符拼接
this.result = parseInt(this.firNum) + parseInt(this.secNum);
},
dec:function () {
this.result = parseInt(this.firNum) - parseInt(this.secNum);
},
multiple:function () {
this.result = parseInt(this.firNum) * parseInt(this.secNum);
},
devise:function () {
this.result = parseInt(this.firNum) / parseInt(this.secNum);
}
}
})
</script>
</body>
</html>
效果：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中使用crypto-js AES對稱加密算法實現(xiàn)加密解密
?在數(shù)字加密算法中，通過可劃分為對稱加密和非對稱加密，本文主要介紹了Vue中使用crypto-js AES對稱加密算法實現(xiàn)加密解密，文中根據(jù)實例編碼詳細介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細介紹了vue.js輪播圖組件使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
setup?用來寫組合式?API，從生命周期的角度，相當于取代了?beforeCreate()，這篇文章主要介紹了Vue3?setup?的作用,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue中使用eslint和prettier格式化代碼方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue使用v-for循環(huán)獲取數(shù)組最后一項
這篇文章主要介紹了vue使用v-for循環(huán)獲取數(shù)組最后一項問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue結(jié)合SignalR實現(xiàn)前后端實時消息同步
這篇文章主要為大家詳細介紹了Vue結(jié)合SignalR實現(xiàn)前后端實時消息同步，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
最全vue的vue-amap使用高德地圖插件畫多邊形范圍的示例代碼
這篇文章主要介紹了最全vue的vue-amap使用高德地圖插件畫多邊形范圍,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
今天小編就為大家分享一篇解決vue 引入子組件報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
詳解利用eventemitter2實現(xiàn)Vue組件通信
這篇文章主要介紹了詳解利用eventemitter2實現(xiàn)Vue組件通信，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
文章主要介紹了父子傳值、兄弟傳值和provide/inject三種在Vue中進行組件間通信的方法,感興趣的朋友跟隨小編一起看看吧2025-03-03