vue.js计算属性用法(computed)技巧,依赖其他vue实例的数据
2018-03-25 17:31
1411 查看
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- Vue.js --> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> </head> <body> <div id="app1"></div> <div id="app2"> {{ reversedText }} </div> </body> </html> <script> var app1 = new Vue({ el:'#app1', data:{ text:'123,456' } }); var app2 = new Vue({ el:'#app2', computed:{ reversedText:function () { //这里依赖的是app1的数据text return app1.text.split(',').reverse().join(','); } } }); //这里我们创建了两个vue实例app1和app2,在app2的计算属性reversedText中,依赖的是app1的数据text,所以当text变化时,实例app2的计算属性也会变化这样的用法尤其是在多人协同开发时很常用,因为你写的一个组件所用得到的数据需要依赖他人的组件提供 </script>
相关文章推荐
- vue.js计算属性computed用法实例分析
- vue.js计算属性用法(computed)
- 详解Vue的computed(计算属性)使用实例之TodoList
- Vue.js学习 Item5 -- 计算属性computed与$watch
- Vue.js学习(二):computed响应数据变化与其他几种方法的比较
- vue.js计算属性(computed)
- Vue.js学习 Item5 -- 计算属性computed与$watch
- Vue.js学习 Item5 -- 计算属性computed与$watch
- Vue1.0学习总结(3)———vue1.0的生命周期、vue计算属性computed的使用、vue实例(vm)上方法总结、vue结合动画使用
- Vue.js第三天学习笔记(计算属性computed)
- VUE -- Vue.js每天必学之计算属性computed与$watch
- Vue.js总结学习(指令、计算属性、数据绑定)
- Vue.js之计算属性computed与$watch
- Vue.js计算属性computed与watch(5)
- vue.js 计算属性及计算属性(computed)、methods、watched三者区别
- Vue.js每天必学之计算属性computed与$watch
- Vue.js第三天学习笔记(计算属性computed)
- vue.js,基础用法实例
- debug过程中对加载顺序、对象属性、Vue数据传递和计算属性等问题的总结
- vue.js的computed,filter,get,set的用法及区别