快捷導(dǎo)航

vue實(shí)現(xiàn)計(jì)算器功能

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>計(jì)算器</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>

效果圖：

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

您可能感興趣的文章:

相關(guān)文章

vue中Bootstrap的詳細(xì)使用方法
Bootstrap適用于快速搭建簡單網(wǎng)站或Web應(yīng)用程序的情況，而Vue.js適用于構(gòu)建復(fù)雜的單頁面應(yīng)用程序，根據(jù)您的項(xiàng)目需求和開發(fā)方式，您可以選擇使用Bootstrap、Vue.js或兩者結(jié)合使用，這篇文章主要介紹了vue使用Bootstrap的詳細(xì)方法,需要的朋友可以參考下
2023-08-08
Vue中關(guān)于this指向的問題示例詳解
在Vue中，方法體里用this調(diào)用vue實(shí)例的數(shù)據(jù)，有時會指向window，導(dǎo)致調(diào)用失敗報(bào)錯，這篇文章主要介紹了Vue中關(guān)于this指向的問題 ,需要的朋友可以參考下
2022-07-07
淺談在不使用ssr的情況下解決Vue單頁面SEO問題(2)
這篇文章主要介紹了淺談在不使用ssr的情況下解決Vue單頁面SEO問題(2)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
在vue中使用G2圖表的示例代碼
這篇文章主要介紹了在vue中使用G2圖表的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
在Vue中使用Viser說明(基于AntV-G2可視化引擎)
這篇文章主要介紹了在Vue中使用Viser說明(基于AntV-G2可視化引擎)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue3?邏輯復(fù)用的實(shí)現(xiàn)示例
在項(xiàng)目開發(fā)中,有兩個功能特別類似,如果單獨(dú)實(shí)現(xiàn),會有很多重復(fù)的代碼，這時候就會用到邏輯復(fù)用，本文主要介紹了vue3?邏輯復(fù)用的實(shí)現(xiàn)示例，具有一定的參考價(jià)值，感興趣的可以了解一下
2024-02-02
vue實(shí)現(xiàn)導(dǎo)航收縮框
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)導(dǎo)航收縮框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
ssm+vue前后端分離框架整合實(shí)現(xiàn)(附源碼)
這篇文章主要介紹了ssm+vue前后端分離框架整合實(shí)現(xiàn)(附源碼)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
vue中圖片轉(zhuǎn)base64格式實(shí)現(xiàn)方法
這篇文章主要介紹了vue中圖片轉(zhuǎn)base64格式實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08
ant design vue datepicker日期選擇器中文化操作
這篇文章主要介紹了ant design vue datepicker日期選擇器中文化操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10