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>