如何利用Vue.js库实现两个数据进行加法运算

2025-11-21 16:51:15

1、第一步，在已创建好的web项目中，指定文件目录下创建HTML5页面，并修改title内容和引入vue相关的js，注意文件路径，如下图所示：

2、第二步，在<body></body>内插入div和input，使用v-model指令，

<div id="addminus"> <input type="text" v-model="oneNum" /> <input type="text" v-model="twoNum" /> {{countNum}}</div>

如下图所示：

如何利用Vue.js库实现两个数据进行加法运算

3、第三步，给两个数绑定默认值，使用oneNum和twoNum两个变量，

var addMinus = new Vue({ el:'#addminus', data:{ oneNum:'23', twoNum:'45' }

});

如下图所示：

如何利用Vue.js库实现两个数据进行加法运算

4、第四步，编写两个数求和的函数，函数名称为computed，

computed:{ countNum:function(){ return Number(this.oneNum) + Number(this.twoNum) }}

如下图所示：

如何利用Vue.js库实现两个数据进行加法运算

5、第五步，预览该静态页面，并改变输入框的值，可以看到两个数的计算结果，如下图所示：

如何利用Vue.js库实现两个数据进行加法运算

6、第六步，在输入框内输入含有字母的值，求和发现出现“NaN”，说明这个函数有bug，需要判断输入的是否为数值，如下图所示：

如何利用Vue.js库实现两个数据进行加法运算

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。