Vue.js实战第三章笔记
3.1什么是计算属性
所有的计算属性都以函数的形式写在 Vue 实例内的 computed 选项内,最终返回计算后的结果。
data:{
text:‘123,456’
},
computed:{
reversedText: function(){
return this.text.split(’,’),reverse().join(’,’);
}
}
3.1计算属性用法
每一个计算属性都包含一个 getter 和一个 setter,我们上面的两个示例都是计算属性的默认用法, 只是利用了 getter 来读取。在你需要时,也可以提供一个 setter 函数,当手动修改计算属性的值就像修改一个普通数据那样时,就会触发 setter 函数,执行一些自定义的操作
data:{
a:‘jack’,
b:‘Green’
},
computed:{
fullName:{
//getter用于读取
get: function(){
return this.a + ‘’+this.b;
}
//setter写入时触发
set: function(newValue){
var names = newValue.split(’,’);
this.a = names[0];
this.b = names[names.length-1];
}
}
}
绝大多数情况下,我们只会用默认的 getter方法来读取一个计算属性,在业务中很少用到setter, 所以在声明一个计算属性时,可以直接使用默认的写法,不必将 getter 和 setter 都声明
3.3计算属性缓存
methods:{
reversedText: function(){
return this.text.split(’,’),reverse().join(’,’);
}
}
methods里可以实现相同效果,
computed是基于他的依赖缓存,一个计算属性所依赖的数据发生变化时,它才会重新取值,text只要不改变,计算属性也就不更新
- vue.js实战笔记:父子组件之间的那些事儿
- Vue.js实战第四章笔记
- Vue.js 零基础实战——饿了吗APP(笔记)
- Node.js+MySQL+Vue 的全栈实战项目:星辰笔记
- Vue.js 源码全方位深入解析 实战课程 (1-5章带随堂笔记)
- Vue.js实战笔记Day1(vue-cli)
- 【慕课网实战课程笔记】Vue.js高仿饿了么外卖App
- Vue.js起步学习笔记
- vue.js学习笔记-7
- 《Spring 3.x 企业应用开发实战》学习笔记 第三章 ApplicationContext和BeanFactory区别
- vue.js入门笔记
- Vue.js笔记-数据绑定
- 学习笔记-[Maven实战]-第三章:Maven使用入门(1)
- 2019最全 vue.js仿锤子商城实战
- 【笔记】web响应式设计:HTML5和CSS3实战 第一章~第三章
- 学习前端js核心Vue 之 directives(自定义命令) transition (过渡动画 js) 个人备忘笔记
- JS实战 · 零碎笔记
- 前端学科笔记分享——vue.js
- [HeadFirst-JSPServlet学习笔记][第三章:实战MVC]
- Vue.js 2.0之全家桶系列视频课程——笔记(三)