计算属性
姓名案例
一个 姓（输入框）
一个 名（输入框）
一个 姓名的汇总
插值语法
利用model属性，将firstname与lastname双向绑定
在页面修改时也会在第三行汇总修改
<body>
<div id="root">
姓:<input type="text" v-model="firstname"><br>
名:<input type="text" v-model="lastname"><br>
姓名:<span>{{firstname.slice(0,3)}}-{{lastname}}</span>
</div>
</body>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
firstname:'张',
lastname:'三'
}
})
</script>
methods方式
使用methods方法编写fullname函数，返回firstname与lastname，其中methods中的this就是vue实例
<body>
<div id="root">
姓:<input type="text" v-model="firstname"><br>
名:<input type="text" v-model="lastname"><br>
姓名:<span>{{fullName()}}</span>
</div>
</body>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
firstname:'张',
lastname:'三'
},
methods:{
fullName(){
return this.firstname +'-'+ this.lastname
}
}
})
</script>
计算属性
要用的属性不存在，需要通过已有属性计算出来
原理：底层借助了object.defineproperty方法提供的getter与setter
使用computed：{}
写计算属性函数，其中写get与set函数访问fullname时，调用get函数，修改fullname时，调用set函数
<body>
<div id="root">
姓:<input type="text" v-model="firstname"><br>
名:<input type="text" v-model="lastname"><br>
姓名:<span>{{fullName}}</span>
</div>
</body>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
firstname:'张',
lastname:'三'
},
computed:{
fullName:{
get(){
//当有人读取fullname时，get会被调用，返回值为fullname的值
//get什么时候调用：1.初次读取fullname时。2.所依赖的属性发生变化时
// console.log(this) // 此处的this是vm
return this.firstname + '-' + this.lastname
},
set(value){
//set什么时候调用：当fullname被修改时
console.log('set',value)
const arr = value.split('-')
this.firstname = arr[0]
this.lastname = arr[1]
}
}
}
})
</script>
总结：
<!--
计算属性：
1.定义：要用的属性不存在，通过已有的属性计算出来
2.原理：底层借助了object.defineproperty方法提供的getter与setter
3.优势：内部有缓存机制，调试更加方便
4.备注：计算属性最终会出现在vm身上，直接读取即可
如果计算属性要被修改，必须写set函数去相应改变，且set中要引起计算时依赖的数据发生变化
-->
计算属性的简写
只有在只读取不修改属性的情况下才能简写
<body>
<div id="root">
姓:<input type="text" v-model="firstname"><br>
名:<input type="text" v-model="lastname"><br>
姓名:<span>{{fullName}}</span>
</div>
</body>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
firstname:'张',
lastname:'三'
},
computed:{
//完整写法：
/*
fullName:{
get(){
return this.firstname + '-' + this.lastname
},
set(value){
console.log('set',value)
const arr = value.split('-')
this.firstname = arr[0]
this.lastname = arr[1]
}
}
*/
//简写：只有考虑读取不考虑修改的情况下才能用简写
fullName(){
return this.firstname + '-' + this.lastname
}
}
})
</script>
fullname（）{}直接充当get函数
标签：Vue,firstname,get,lastname,day58,set,计算,fullname,属性 From： https://www.cnblogs.com/GUGUZIZI/p/17048012.html