<div id="app"> <h1>简易计算器</h1> <div> <span>数值A</span> <span> <input type="number" v-model="a" name="name" value="" /> </span> </div> <div> <span>数值B</span> <span> <input type="number" v-model="b" name="name" value="" /> </span> </div> <input id="Button1" v-on:click.stop="handle" type="button" value="计算" /> <div> <span>计算结果</span> <span v-text="sum"> </span> </div> </div>
var vm = new Vue({ el: "#app", data: { a: "", b: "", sum: "" }, methods: { handle: function () { //实现计算逻辑 this.sum = parseInt(this.a) + parseInt(this.b); } } })
我个人认为,现在做一个小结还是挺好的
分析一下计算器中用到的技术点,
v-model双向绑定,能够直接获取到我们输入的值
v-text 显示出计算后的值,无闪动
v-on:click.stop 点击事件以及事件修饰符