- 计算属性完整写法
- 计算属性默认的简写,只能读取访问,不能“修改”
- 如果要“修改”---需要写计算属性的完整写法
const app = new Vue({
// 通过el配置选择器 指定vue管理的是哪个盒子
el:'#app',
//通过data提供数据
data:{
firstName:'刘',
lastName:'备',
},
methods:{
changeName(){
this.fullName = '吕小布'
}
},
computed:{
//计算属性里面写函数
//计算属性:有缓存的,一旦计算出来结果,就会立刻缓存
// 下一次读取---直接读缓存就行---性能特别高
//简写 --- 获取,没有配置设置的逻辑
//完整写法---获取+设置
fullName:{
//当fullName计算属性,被获取求值时,执行get(有缓存,优先读取缓存)
//会将返回值作为,求值的结果
get(){
return this.firstName + this.lastName
},
//当fullName计算属性,被修改赋值时,执行set
// 修改的值,传递给set方法的形参
set(value){
//slice(0,1) 截取第一个字符
//slice(1) 截取第一个字符后面的所有字符
this.firstName = value.slice(0,1)
this.lastName = value.slice(1)
}
}
}
})