快捷導(dǎo)航

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

更新時(shí)間：2020年02月25日 08:42:37 作者：aProgrammerWithDream

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

使用Vue編寫簡(jiǎn)單計(jì)算器，供大家參考，具體內(nèi)容如下

在Vue中，v-model 指令，可以實(shí)現(xiàn)表單元素和 Model 中數(shù)據(jù)的雙向數(shù)據(jù)綁定，接下來(lái)，我們就用這個(gè)指令編寫一個(gè)簡(jiǎn)單的計(jì)算器，代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--計(jì)算器的顯示結(jié)構(gòu)-->
<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="calculator">
 <input type="text" v-model="result">
</div>

<script>
 // 創(chuàng)建 Vue 實(shí)例，得到 ViewModel，簡(jiǎn)寫vm
 var vm = new Vue({
  el: '#app',
  data: {
   n1: 0,
   n2: 0,
   opt: '+',
   result: 0
  },
  methods: {
   //計(jì)算的方法
   calculator() {
    switch (this.opt) {
     case '+':
      this.result = Number(this.n1) + Number(this.n2);
      break;
     case '-':
      this.result = Number(this.n1) - Number(this.n2);
      break;
     case '*':
      this.result = Number(this.n1) * Number(this.n2);
      break;
     case '/':
      this.result = Number(this.n1) / Number(this.n2);
      break;
    }
   }
  }
 });
</script>
</body>
</html>

運(yùn)行結(jié)果如下：

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

您可能感興趣的文章:

相關(guān)文章

Vue中的性能優(yōu)化方案
本文主要介紹了Vue中的性能優(yōu)化方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
vue更改數(shù)組中的值實(shí)例代碼詳解
這篇文章主要介紹了vue更改數(shù)組中的值，本文通過(guò)兩個(gè)例子，給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-02-02
vue中Axios添加攔截器刷新token的實(shí)現(xiàn)方法
Axios是一款網(wǎng)絡(luò)前端請(qǐng)求框架，本文主要介紹了vue中Axios添加攔截器刷新token的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
vue elementui select標(biāo)簽監(jiān)聽(tīng)change事件失效問(wèn)題
這篇文章主要介紹了vue elementui select標(biāo)簽監(jiān)聽(tīng)change事件失效問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
使用Vue開(kāi)發(fā)自己的Chrome擴(kuò)展程序過(guò)程詳解
這篇文章主要介紹了使用Vue開(kāi)發(fā)自己的Chrome擴(kuò)展程序過(guò)程詳解，瀏覽器擴(kuò)展程序是可以修改和增強(qiáng) Web 瀏覽器功能的小程序。它們可用于各種任務(wù)，例如阻止廣告，管理密碼，組織標(biāo)簽，改變網(wǎng)頁(yè)的外觀和行為等等。,需要的朋友可以參考下
2019-06-06
Vue + Elementui實(shí)現(xiàn)多標(biāo)簽頁(yè)共存的方法
這篇文章主要介紹了Vue + Elementui實(shí)現(xiàn)多標(biāo)簽頁(yè)共存的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-06-06
Vue Mint UI mt-swipe的使用方式
這篇文章主要介紹了Vue Mint UI mt-swipe的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue自定義翻頁(yè)組件的方法
這篇文章主要為大家詳細(xì)介紹了vue自定義翻頁(yè)組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-09-09
vue3使用element-plus搭建后臺(tái)管理系統(tǒng)之菜單管理功能
這篇文章主要介紹了vue3使用element-plus搭建后臺(tái)管理系統(tǒng)之菜單管理,使用element-plus el-tree組件快速開(kāi)發(fā)樹(shù)形菜單結(jié)構(gòu)，el-tree組件中filter-node-method事件便可以實(shí)現(xiàn)樹(shù)形菜單篩選過(guò)濾功能，需要的朋友可以參考下
2022-04-04
ant design vue datepicker日期選擇器中文化操作
這篇文章主要介紹了ant design vue datepicker日期選擇器中文化操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-10-10