计算属性:
1,定义:要用的属性不存在,要通过已有的属性计算得来
2.原理:底层就是借助了objcet.defineproperty方法提供的getter和setter
3.get函数什么时候执行?
(1)初次读取时会执行一次
(2)当依赖的数据被发生改变时会被再次调用
4,优势methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
5.备注:计算属性最终会出现在vm上,直接读取使用即可
如果计算属性要被修改那务必写set函数去响应修改,且set中要引起计算时依赖的数据发生变化
计算属性: 1,定义:要用的属性不存在,要通过已有的属性计算得来 2.原理:底层就是借助了objcet.defineproperty方法提供的getter和setter 3.get函数什么时候执行? (1)初次读取时会执行一次 (2)当依赖的数据被发生改变时会被再次调用 4,优势methods实现相比,内部有缓存机制(复用),效率更高,调试方便。 5.备注:计算属性最终会出现在vm上,直接读取使用即可 如果计算属性要被修改那务必写set函数去响应修改,且set中要引起计算时依赖的数据发生变化 <body> <div id="root"> 姓:<input type="text" v-model="firstName"> 名:<input type="text" v-model="lastName"> 全名:<span>{{fullName}}</span> </div> </body> <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.0.0-alpha.1/axios.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue ({ el:"#root", data:{ firsName:"林", lasrName:"尚" }, //需要写一个全新的配置项 methods:{}, computed:{ fullName:{ //get有什么作用,当又人读取fullName时,get就会被调用,且返回值读作fullName的值 get(){ console.log("get 被调用了"); return this.firsName + '-' + this.lastName }, //get什么时候被调用? 当fullName被修改时 set(value){ console.log("set",value); const arr = value.split("-") this.firsName=arr[0] this.lasrName=arr[1] } } } }) </script> </html>
6如果只考虑读取时,可用简写
//完整写法:
// fullName: {
// get() {
// console.log("get 被调用了");
// return this.firsName + '-' + this.lastName
// },
// set(value) {
// console.log("set", value);
// const arr = value.split("-")
// this.firsName = arr[0]
// this.lasrName = arr[1]
// }
//简写:
fullName(){
console.log("get 被调用了");
return this.firsName + '-' + this.lastName
}
做个小案例:用到三元表达式
<body>
<div id="root">
<h1>今天的天气{{isHot ? '超热':'凉爽'}}</h1>
<button>切换天气</button>
</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.0.0-alpha.1/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#root',
data:{
isHot:true,
}
})
</script>
</html>