Vue實(shí)現(xiàn)簡(jiǎn)易計(jì)算器

更新時(shí)間：2020年02月25日 08:10:50 作者：CodingIsNotEasy

這篇文章主要為大家詳細(xì)介紹了用Vue制作的簡(jiǎn)易計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue實(shí)現(xiàn)簡(jiǎn)易計(jì)算器的具體代碼，供大家參考，具體內(nèi)容如下

<html>
<body>
<div id="demo">
 <h2>簡(jiǎn)單加減乘除計(jì)算器</h2>
 <p>請(qǐng)輸入第一個(gè)數(shù)：<input type="text" v-model="firNum"></p>
 <p>請(qǐng)輸入第二個(gè)數(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>計(jì)算結(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>

效果：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue中使用crypto-js AES對(duì)稱(chēng)加密算法實(shí)現(xiàn)加密解密
?在數(shù)字加密算法中，通過(guò)可劃分為對(duì)稱(chēng)加密和非對(duì)稱(chēng)加密，本文主要介紹了Vue中使用crypto-js AES對(duì)稱(chēng)加密算法實(shí)現(xiàn)加密解密，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue.js輪播圖組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue.js輪播圖組件使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
Vue3?setup?的作用實(shí)例詳解
setup?用來(lái)寫(xiě)組合式?API，從生命周期的角度，相當(dāng)于取代了?beforeCreate()，這篇文章主要介紹了Vue3?setup?的作用,需要的朋友可以參考下
2022-12-12
Vue中使用eslint和prettier格式化代碼方式
這篇文章主要介紹了Vue中使用eslint和prettier格式化代碼方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue使用v-for循環(huán)獲取數(shù)組最后一項(xiàng)
這篇文章主要介紹了vue使用v-for循環(huán)獲取數(shù)組最后一項(xiàng)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue結(jié)合SignalR實(shí)現(xiàn)前后端實(shí)時(shí)消息同步
這篇文章主要為大家詳細(xì)介紹了Vue結(jié)合SignalR實(shí)現(xiàn)前后端實(shí)時(shí)消息同步，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
最全vue的vue-amap使用高德地圖插件畫(huà)多邊形范圍的示例代碼
這篇文章主要介紹了最全vue的vue-amap使用高德地圖插件畫(huà)多邊形范圍,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-07-07
解決vue 引入子組件報(bào)錯(cuò)的問(wèn)題
今天小編就為大家分享一篇解決vue 引入子組件報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
詳解利用eventemitter2實(shí)現(xiàn)Vue組件通信
這篇文章主要介紹了詳解利用eventemitter2實(shí)現(xiàn)Vue組件通信，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
uniapp+Vue3 組件之間的傳值方法示例詳解
文章主要介紹了父子傳值、兄弟傳值和provide/inject三種在Vue中進(jìn)行組件間通信的方法,感興趣的朋友跟隨小編一起看看吧
2025-03-03