|
?计算属性 简化插值表达式
?? ??? ? ? ? ? 可以将计算过程保存到计算属性中
?
?? ??? ? {{reverseStr}}
?? ??? ? {{reverseStrA()}}
methods:{
// 计算方法
?? ?reverseStrA(){
?? ??? ?console.log("我是计算方法的调用");
?? ??? ??? ?return this.msg.split('').reverse().join('')
}
},
定义计算属性 与方法的区别
?1.计算属性有缓存的操作，只执行一次，效率更高
2.计算属性调用时只需要写属性名称
3.每次调用方法时都会执行，没有缓存操作
4.调用方法时需要();
computed:{
// 必须有返回值
reverseStr(){
console.log("计算属性");
?? ?return this.msg.split('').reverse().join('')
?? ??? ?}
?? ?}
// 定义监听器 自动调用
?? ??? ??? ??? ?watch:{
?? ??? ??? ??? ??? ?// 当数据发生变化时，就会触发监听器的函数，必须传递参数到监听器中
?? ??? ??? ??? ??? ?firstName(value){
?? ??? ??? ??? ??? ??? ?// console.log(value);
?? ??? ??? ??? ??? ??? ?this.fullName ?= value +this.lastName?
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?lastName(value){
?? ??? ??? ??? ??? ??? ?this.fullName = this.firstName ?+ value
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?},
|