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