Vue事件练习-----实现一个简单的计算器
效果： 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件绑定 v-on</title> <script src="./js/vue.js"></script> </head> <body> <div id="box"> <input type="text" v-model="val1"> <input type="text" v-model="val2"> <span v-text="result"></span> <br> <button @click="add">加</button> <button @click="sub">减</button> <button @click="mul">乘</button> <button @click="div">除</button> <!-- 或者<button v-on:click="div">除</button> v-on指令可简写为 @ --> </div> <script> var vm = new Vue({ el:"#box", //数据 data:{ result:"", val1:"", val2:"" }, //方法 methods:{ add:function(){ this.result = parseInt(this.val1) + parseInt(this.val2); }, sub:function(){ this.result = this.val1 - this.val2; }, mul:function(){ this.result = this.val1 * this.val2; }, div:function(){ this.result = this.val1 / this.val2; } } }) </script> </body> </html>