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

更新時(shí)間：2020年02月25日 09:23:44 作者：LitongZero

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

利用Vue.js寫(xiě)的一個(gè)簡(jiǎn)單的計(jì)算器。非常簡(jiǎn)單的案例。

通過(guò)這個(gè)案例，練習(xí)一下Vue的語(yǔ)法。

通過(guò)案例可以看出，Vue.js解放了DOM操作。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue計(jì)算器</title>
</head>
<body>
<div id="app">
 <input type="number" v-model="num1">
 <select v-model="operation">
  <option value="0">+</option>
  <option value="1">-</option>
  <option value="2">*</option>
  <option value="3">/</option>
 </select>
 <input type="number" v-model="num2">
 <button @click="calculate">=</button>
 <strong>{{results}}</strong>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
 new Vue({
  el: '#app',
  data:{
   operation: '0',
   results: '0',
   num1:0,
   num2:0,
  },
  methods:{
   calculate:function(){
    switch (this.operation) {
     case '0' :
      this.results = parseInt(this.num1) + parseInt(this.num2);
      break;
     case '1' :
      this.results = this.num1-this.num2;
      break;
     case '2' :
      this.results = this.num1*this.num2;
      break;
     case '3' :
      this.results = this.num1/this.num2;
      break;
    }
   }
  }
 })
 
</script>
 
</body>
</html>

截圖：

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

您可能感興趣的文章:

相關(guān)文章

vue使用路由守衛(wèi)實(shí)現(xiàn)菜單的權(quán)限設(shè)置
我們使?vue-element-admin前端框架開(kāi)發(fā)后臺(tái)管理系統(tǒng)時(shí),?般都會(huì)涉及到菜單的權(quán)限控制問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue使用路由守衛(wèi)實(shí)現(xiàn)菜單的權(quán)限設(shè)置的相關(guān)資料,需要的朋友可以參考下
2023-06-06
深入淺析Vue中的slots/scoped slots
這篇文章主要介紹了Vue中的slots/scoped slots,本文實(shí)例代碼相結(jié)合的形式給大家介紹了slots的工作原理，需要的朋友可以參考下
2018-04-04
vue自定義指令實(shí)現(xiàn)一鍵復(fù)制功能
本文旨在記錄解決在工作中一鍵復(fù)制功能得需求,本文主要使用了Vue3+TypeScript+Ant-Design-Vue,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-11-11
vue中使用v-for時(shí)為什么不能用index作為key
這篇文章主要介紹了vue中使用v-for時(shí)為什么不能用index作為key，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
vue實(shí)現(xiàn)簡(jiǎn)單加法計(jì)算器
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單加法計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-10-10
vue.js中for循環(huán)如何實(shí)現(xiàn)異步方法同步執(zhí)行
這篇文章主要介紹了vue.js中for循環(huán)如何實(shí)現(xiàn)異步方法同步執(zhí)行問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
Vue+Antv?F2實(shí)現(xiàn)混合圖表
這篇文章主要為大家詳細(xì)介紹了Vue+Antv?F2實(shí)現(xiàn)混合圖表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue頁(yè)面堆棧管理器詳情
這篇文章主要介紹了Vue頁(yè)面堆棧管理器
2021-10-10
vue3中頁(yè)面跳轉(zhuǎn)兩種實(shí)現(xiàn)方式
在Vue3中Vue?Router是一個(gè)常用的路由管理庫(kù),它提供了一種簡(jiǎn)單而強(qiáng)大的方式來(lái)實(shí)現(xiàn)路由跳轉(zhuǎn)和導(dǎo)航,這篇文章主要給大家介紹了關(guān)于vue3中頁(yè)面跳轉(zhuǎn)的兩種實(shí)現(xiàn)方式,需要的朋友可以參考下
2024-09-09
vue cli webpack中使用sass的方法
這篇文章主要介紹了vue cli webpack中使用sass的方法,需要的朋友可以參考下
2018-02-02