Vue實現(xiàn)簡單計算器案例
更新時間：2020年02月25日 09:23:44 作者：LitongZero
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單計算器案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
利用Vue.js寫的一個簡單的計算器。非常簡單的案例。
通過這個案例，練習(xí)一下Vue的語法。
通過案例可以看出，Vue.js解放了DOM操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue計算器</title>
</head>
<body>
<div id="app">
<input type="number" v-model="num1">
<select v-model="operation">
<option value="0">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
<input type="number" v-model="num2">
<button @click="calculate">=</button>
<strong>{{results}}</strong>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
operation: '0',
results: '0',
num1:0,
num2:0,
},
methods:{
calculate:function(){
switch (this.operation) {
case '0' :
this.results = parseInt(this.num1) + parseInt(this.num2);
break;
case '1' :
this.results = this.num1-this.num2;
break;
case '2' :
this.results = this.num1*this.num2;
break;
case '3' :
this.results = this.num1/this.num2;
break;
}
}
}
})
</script>
</body>
</html>
截圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用vant-picker實現(xiàn)自定義內(nèi)容,根據(jù)內(nèi)容添加圖標
這篇文章主要介紹了使用vant-picker實現(xiàn)自定義內(nèi)容，根據(jù)內(nèi)容添加圖標，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要給大家介紹了關(guān)于vue路由的配置和頁面切換的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
vue?demi支持sfc方式的vue2vue3通用庫開發(fā)詳解
這篇文章主要為大家介紹了vue?demi支持sfc方式的vue2vue3通用庫開發(fā)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了Vue項目判斷開發(fā)、測試、正式環(huán)境過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
路由這個概念最先是后端出現(xiàn)的,下面這篇文章主要給大家介紹了關(guān)于vue前端路由以及vue-router兩種模式的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
這篇文章主要為大家學(xué)習(xí)介紹了如何利用Vue2實現(xiàn)全局水印的效果，文中的示例代碼簡潔易懂，具有一定的借鑒價值，感興趣的小伙伴可以了解下2023-07-07
解決v-for中使用v-if或者v-bind:class失效的問題
今天小編就為大家分享一篇解決v-for中使用v-if或者v-bind:class失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue實現(xiàn)動態(tài)監(jiān)測元素高度
這篇文章主要介紹了vue實現(xiàn)動態(tài)監(jiān)測元素高度方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vuex 注入 Vue 生命周期的過程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
Ganttastic是一個小型的Vue.js組件，用于在Web應(yīng)用程序上呈現(xiàn)一個可配置的、可拖動的甘特圖。本文就將用它來實現(xiàn)簡單可擴展的甘特圖，感興趣的可以嘗試一下2022-11-11