使用Vue實現(xiàn)簡單計算器

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

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

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

在Vue中，v-model 指令，可以實現(xiàn)表單元素和 Model 中數(shù)據(jù)的雙向數(shù)據(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>
<!--計算器的顯示結(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 實例，得到 ViewModel，簡寫vm
 var vm = new Vue({
  el: '#app',
  data: {
   n1: 0,
   n2: 0,
   opt: '+',
   result: 0
  },
  methods: {
   //計算的方法
   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>

運行結(jié)果如下：

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

您可能感興趣的文章:

相關(guān)文章

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