vuejs基础-计算器案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.min.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="abc1"/> <input type="text" v-model="result"/> </div> </body> <script> new Vue({ el:"#app", data:{ n1:0, opt:'+', n2:0, result:0 }, methods:{ abc(){ 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; } }, abc1(){ var stringopt = "parseInt(this.n1)" + this.opt + "parseInt(this.n2) "; this.result = eval(stringopt); } } }); </script> </html>
