手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

如何使用Vue.js中的方法事件绑定计算两个数的和

时间:2024-10-12 09:22:41

1、第一步,双击打开HBuilder编辑工具,新建静态页面compute.html,并引入vue.js,如下图所示:

如何使用Vue.js中的方法事件绑定计算两个数的和

2、第二步,在<body></body>标签元素内插入一个div标签元玟姑岭箫素,定义div的ID属性,利用双大括号绑定数据sum,如下图所示:

如何使用Vue.js中的方法事件绑定计算两个数的和

3、第三步,在div标签下方插入<script></script>,并在里面编写vue.js代码,声明两个数,添加计算函数,如下图所示:

如何使用Vue.js中的方法事件绑定计算两个数的和

4、第四步,保存代码并在浏览器中预览结果,结果发现两个数据没有相加,而是直接拼接到一起了,如下图所示:

如何使用Vue.js中的方法事件绑定计算两个数的和

5、第五步,将data对象的one和two对应的值改为数值型,保存代码,如下图所示:

如何使用Vue.js中的方法事件绑定计算两个数的和

6、第六步,再次在浏览器中查看效果,结果可以看到两个数据相加求和,如下图所示:

如何使用Vue.js中的方法事件绑定计算两个数的和
© 手抄报圈