// 1、通过v-model指令实现数值a和数值b的绑定
// 2、给计算按钮绑定事件实现计算逻辑
// 3、将计算结果绑定到对应位置

通过上面业务需求，我们来看看用代码实现上面业务逻辑

// 模版 complate

        

            
简单计算器
            数值A：

            数值B：

            计算

            
计算结果：{{ result }}
        


// 业务逻辑
var vm = new Vue({
     el: "#app",
     data: {
           numA: '',  // 绑定数据A
           numB: '',  // 绑定数据B
           result: '' // 计算结果
     },
     methods: {
          computerSum: function () {
                //  实现计算逻辑
                // this.result = this.numA + this.numB; // 注意这里的结果是字符串拼接，应把它转换成数字
                this.result = parseInt(this.numA) + parseInt(this.numB);
          }
     }
});

显示效果如图：