快捷導(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后臺(tái)管理系統(tǒng)之實(shí)現(xiàn)分頁(yè)功能示例
本文主要介紹了Vue后臺(tái)管理系統(tǒng)之實(shí)現(xiàn)分頁(yè)功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-12-12
vue實(shí)現(xiàn)跨頁(yè)面定位錨點(diǎn)區(qū)域方式
這篇文章主要介紹了vue實(shí)現(xiàn)跨頁(yè)面定位錨點(diǎn)區(qū)域方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue查找指令和模板思路詳解
這篇文章主要介紹了vue查找指令和模板,基本思路是需要判斷當(dāng)前遍歷到的節(jié)點(diǎn)是一個(gè)元素還是一個(gè)文本，隨著思路的展開我們就來(lái)實(shí)現(xiàn)這個(gè)功能，需要的朋友可以參考下
2023-10-10
淺談Vue+Ant Design form表單的一些坑
本文主要介紹了淺談Vue+Ant Design form表單的一些坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
Vue中v-for的數(shù)據(jù)分組實(shí)例
下面小編就為大家分享一篇Vue中v-for的數(shù)據(jù)分組實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
vue使用mpegts.js實(shí)現(xiàn)播放flv的直播視頻流
這篇文章主要為大家詳細(xì)介紹了vue如何使用mpegts.js實(shí)現(xiàn)播放flv的直播視頻流,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下
2024-01-01
ElementUI Tree 樹形控件的使用并給節(jié)點(diǎn)添加圖標(biāo)
這篇文章主要介紹了ElementUI Tree 樹形控件的使用并給節(jié)點(diǎn)添加圖標(biāo)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
詳解webpack + vue + node 打造單頁(yè)面(入門篇)
本篇文章主要介紹了詳解webpack + vue + node 打造單頁(yè)面(入門篇) ，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-09-09
vue 解決異步數(shù)據(jù)更新問(wèn)題
今天小編就為大家分享一篇vue 解決異步數(shù)據(jù)更新問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10
vue3+element?plus中利用el-menu如何實(shí)現(xiàn)路由跳轉(zhuǎn)
這篇文章主要給大家介紹了關(guān)于vue3+element?plus中利用el-menu如何實(shí)現(xiàn)路由跳轉(zhuǎn)的相關(guān)資料,在Vue?Router中我們可以使用el-menu組件來(lái)實(shí)現(xiàn)菜單導(dǎo)航,通過(guò)點(diǎn)擊菜單項(xiàng)來(lái)跳轉(zhuǎn)到不同的路由頁(yè)面,需要的朋友可以參考下
2023-12-12