vue点击自增和求和的实例代码
2019-11-07 07:04
2436 查看
如下所示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ref</title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="root"> <counter></counter> <counter></counter> </div> <script> Vue.component('counter',{ template:'<div @click="handleClick">{{number}}</div>', data:function () { return { number:0 } }, methods:{ handleClick:function () { this.number++ } } }) var vm = new Vue({ el:'#root', }) </script> </body> </html>
求和
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ref</title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="root"> <counter ref="one" @change="handleChange"></counter><!--2.父组件监听--> <counter ref="two" @change="handleChange"></counter> <div >{{total}}</div><!--//子组件向父组件传值--><!--求和--> </div> <script> Vue.component('counter',{ template:'<div @click="handleClick">{{number}}</div>', data:function () { return { number:0 } }, methods:{ handleClick:function () { this.number++ //点击数字自增一 this.$emit('change')//1.子组件向外触发change函数,父组件<counter>监听 } } }) var vm = new Vue({ el:'#root', data:{ total:0 }, // 3.在父组件里定义handleChange方法 methods:{ handleChange:function () { this.total=this.$refs.one.number + this.$refs.two.number console.log(this.$refs.one.number) console.log(this.$refs.two.number) } } }) // 4.在counter里定义ref="one" // 5.在vue里定义 console.log(this.$refs.one) 再通过number获取自增的值 // 6.通过total获取两数之和 </script> </body> </html>
以上这篇vue点击自增和求和的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考
您可能感兴趣的文章:
相关文章推荐
- Vue.js 点击按钮显示/隐藏内容的实例代码
- vue组件中点击按钮后修改输入框的状态实例代码
- vue.js模仿京东省市区三级联动的选择组件实例代码
- 在vue中使用echarts图表实例代码详解
- VUE路由动态加载实例代码讲解
- 通过vue写一个瀑布流插件代码实例
- Vue的属性、方法、生命周期实例代码详解
- node+vue实现用户注册和头像上传的实例代码
- vue做网页开场视频的实例代码
- Vue.js实现实例搜索应用功能详细代码
- Vue.js实现输入框绑定的实例代码
- Vue 实例代码
- Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)
- vue中element-ui表格缩略图悬浮放大功能的实例代码
- vue弹出框组件封装实例代码
- vue下拉列表功能实例代码
- Vue 列表上下过渡效果的实例代码
- vue的全局提示框组件实例代码
- Vue中的组件及路由使用实例代码详解
- webpack+vue+vueRouter模块化构建完整项目实例超详细步骤(附截图、代码、入门篇)