vue實現(xiàn)計算器功能

更新時間：2020年02月22日 13:33:26 作者：ali是個小太陽

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

本文實例為大家分享了vue實現(xiàn)計算器功能的具體代碼，供大家參考，具體內容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>計算器</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<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="calc">
 <input type="text" v-model="result">
</div>
<script>
new Vue({
 el: '#app',
 data: {
  n1: 0,
  n2: 0,
  result: 0,
  opt: '+'
 },
 methods: {
  calc() {
   switch (this.opt) {
    case "+":
     this.result = parseInt(this.n1) + parseInt(this.n2);
     break;
    case "-":
     this.result = parseInt(this.n1) - parseInt(this.n2);
     break;
    case "*":
     this.result = parseInt(this.n1) * parseInt(this.n2);
     break;
    case "/":
     this.result = parseInt(this.n1) / parseInt(this.n2);
     break;
   }
  }
 }
})
</script>
</body>
</html>

效果圖：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

你不知道的Vue技巧之--開發(fā)一個可以通過方法調用的組件(推薦)
這篇文章主要介紹了你不知道的Vue技巧之--開發(fā)一個可以通過方法調用的組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
Vue+Koa+MongoDB從零打造一個任務管理系統(tǒng)的詳細過程
這篇文章主要介紹了Vue+Koa+MongoDB從零打造一個任務管理系統(tǒng),本文通過圖文實例代碼相結合給大家介紹的非常詳細，需要的朋友可以參考下
2022-08-08
vue實現(xiàn)界面滑動效果
這篇文章主要為大家詳細介紹了vue實現(xiàn)界面滑動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-07-07
Vue-CLI與Vuex使用方法實例分析
這篇文章主要介紹了Vue-CLI與Vuex使用方法,結合實例形式分析了Vue-CLI創(chuàng)建項目與Vuex相關概念、使用方法及操作注意事項,需要的朋友可以參考下
2020-01-01
使用vue初用antd 用v-model來雙向綁定Form表單問題
這篇文章主要介紹了使用vue初用antd 用v-model來雙向綁定Form表單問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue中計算屬性未生效:原因、排查與解決過程
本文將深入探討計算屬性未生效的常見原因,并提供排查和解決方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-03-03
Vue項目打包并部署nginx服務器的詳細步驟
vue項目開發(fā)好之后需要部署到服務器上進行外網(wǎng)訪問,下面這篇文章主要給大家介紹了關于Vue項目打包并部署nginx服務器的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-07-07
vue2結合element-ui的gantt圖實現(xiàn)可拖拽甘特圖
因為工作中要用到甘特圖,所以我在網(wǎng)上搜索可以用的甘特圖,搜索了好多,但是網(wǎng)上搜到大多數(shù)都很雞肋,不能直接使用,下面這篇文章主要給大家介紹了關于vue2結合element-ui的gantt圖實現(xiàn)可拖拽甘特圖的相關資料,需要的朋友可以參考下
2022-11-11
Vue3?pinia管理數(shù)據(jù)的3種方式代碼
在Vue3中Pinia是一個狀態(tài)管理庫,它提供了一種簡單而強大的方式來管理應用程序的狀態(tài),這篇文章主要給大家介紹了關于Vue3?pinia管理數(shù)據(jù)的3種方式,需要的朋友可以參考下
2024-04-04
vue中手機號,郵箱正則驗證以及60s發(fā)送驗證碼的實例
下面小編就為大家分享一篇vue中手機號,郵箱正則驗證以及60s發(fā)送驗證碼的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03