Vue.js库中具有计算属性，根据输入的值发生改变，其计算结果也发生改变。属性值绑定需要用到v-model，这里计算两个数的和，当其中一个或两个数据改变时，它们的和也随之发生改变。下面利用一个实例使用Vue.js计算两个数和，操作如下：
工具/原料
1
Vue.js
2
HBuilder
3
浏览器
4
截图工具
5
HTML5
6
CSS3
方法/步骤
1
第一步，在已创建好的web项目中，指定文件目录下创建HTML5页面，并修改title内容和引入vue相关的js，注意文件路径，如下图所示：
2
第二步，在
内插入div和input，使用v-model指令， {{countNum}}
如下图所示：3
第三步，给两个数绑定默认值，使用oneNum和twoNum两个变量，var addMinus = new Vue({ el:'#addminus', data:{ oneNum:'23', twoNum:'45' }});如下图所示：
4
第四步，编写两个数求和的函数，函数名称为computed，computed:{ countNum:function(){ return Number(this.oneNum) + Number(this.twoNum) }}如下图所示：
5
第五步，预览该静态页面，并改变输入框的值，可以看到两个数的计算结果，如下图所示：
6
第六步，在输入框内输入含有字母的值，求和发现出现“NaN”，说明这个函数有bug，需要判断输入的是否为数值，如下图所示：
注意事项
1
注意动态绑定数据需要用法v-model
2
注意将字符串转换成数值用Number，其中这个字符串只能是数字组成
上一篇：js 各表达式的比较结果