vue設置一個簡單的計算器

<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="="><input type="text" v-model="result"><el-button @click="calc">計算</el-button> </div> 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;}} }

效果圖：

總結

以上是生活随笔為你收集整理的vue设置一个简单的计算器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。