Vue 计算属性
通过已有的属性计算得到结果（效率更好）比methods效率好
<body>
<div id="root">
姓：<input type="text" v-model:value='firstName'/><br />
名：<input type="text" v-model:value='lastName'/><br /><br />
<!-- 不推荐 -->
名字：<h1>{{firstName.slice(0,3)}}-{{lastName}}</h1>
<!-- 插值语法 -->
名字：<h1 >{{fullName()}}</h1>
计算属性
名字：<h1 >{{fulName}}</h1>
剩下的fulName通过缓存读取
名字：<h1 >{{fulName}}</h1>
名字：<h1 >{{fulName}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
},
methods:{
fullName(){
return this.firstName+'-'+this.lastName
}
},
computed:{//计算属性
fulName:{
get(){//当有人读取fullName时，get就会调用
//此处的this为Vue 既vm
//get在初次读取的时候调用，所依赖的数据发生变化时调用
return this.firstName+'-'+this.lastName
},
set(value){
//set在fulName修改的时候调用
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
});
</script>
</body>
简写形式（只读不该）
computed:{//计算属性
fulName:{
get(){//当有人读取fullName时，get就会调用
//此处的this为Vue 既vm
//get在初次读取的时候调用，所依赖的数据发生变化时调用
return this.firstName+'-'+this.lastName
},
set(value){
//set在fulName修改的时候调用
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
},
//简写形式 本质不是一个函数
fulName(){
return this.firstName+'-'+this.lastName
}
}
840
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
