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