简单计算器
需求:实现简单的加法计算,分别输入数值a和数值b,点击计算按钮,结果显示在下面。
1.通过v-model 指令实现数值a和数值b的绑定
2.给计算按钮绑定事件,实现计算逻辑
3.将计算结果绑定到对应位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<h1>简单计算器</h1>
<div>
<span>数值A:</span>
<span>
<input type="text" v-model = 'a'>
</span>
</div>
<div>
<span>数值B:</span>
<span>
<input type="text" v-model = 'b'>
</span>
</div>
<div>
<button v-on:click = 'handle'>计算</button>
</div>
<div>
<span>计算结果:</span>
<span v-text = "result"></span>
</div>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
a:'',
b:'',
result:''
},
methods: {
handle: function(){
// 实现计算逻辑
this.result =parseInt(this.a) + parseInt(this.b);
}
}
});
</script>
</body>
</html>