vue.js计算属性(computed)
2018-03-24 15:34
1246 查看
<!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> <!--# 如表达式如果过长,或逻辑更为复杂时,就会变得臃肿甚至难以阅读和维护 #--> {{ text.split(',').reverse().join(',') }} <!--# 所以在遇到复杂的逻辑时应该使用计算机属性 #--> </div> <div id="app"> {{ reversedText }} </div> </body> </html> <script> var app = new Vue({ el:'#app', data:{ text:'123,456' }, //所有的计算属性都以函数的形式写在vue实例内的computed选项内,最终返回计算的结果 computed:{ reversedText:function () { //这里的this指向的是当前的vue实例 return this.text.split(',').reverse().join(','); } } }) </script>
相关文章推荐
- Vue.js计算属性computed与watch(5)
- vue.js计算属性用法(computed)技巧,依赖其他vue实例的数据
- Vue.js第三天学习笔记(计算属性computed)
- vue.js计算属性用法(computed)
- vue.js计算属性computed用法实例分析
- Vue.js第三天学习笔记(计算属性computed)
- Vue.js每天必学之计算属性computed与$watch
- VUE -- Vue.js每天必学之计算属性computed与$watch
- Vue.js之计算属性computed与$watch
- Vue.js学习 Item5 -- 计算属性computed与$watch
- Vue.js学习 Item5 -- 计算属性computed与$watch
- Vue.js学习 Item5 -- 计算属性computed与$watch
- vue.js 计算属性及计算属性(computed)、methods、watched三者区别
- Vuejs——(3)计算属性,样式和类绑定
- vue-computed计算属性
- vue.js使用之计算属性与方法返回的差别
- vue 利用 计算属性computed 实现轮播图 上一页 和下一页功能
- Vue.js 计算属性
- Vue.js计算属性
- Vue.js笔记-计算属性 class与style绑定