Vue计算属性

文章目录

• 学习目标
• 计算属性实例
• methods和computed
• 计算属性setter和getter

---

学习目标

1. 掌握computed计算属性定义
2. 掌握computed计算属性缓存
3. 掌握computed计算属性的setter
4. 熟练使用computed计算属性完成复杂的逻辑处理

---

一、计算属性实例

<p>原始字符串:{{msg}}</p>
<p>反转字符串：{{msg.split('').reverse().join('')}}</p>
<p>计算属性反转：{{revMsg}}</p>

computed:{
    revMsg:function(){
        return this.msg.split('').reverse().join('')
    }
}

---

二、methods和computed

<p>原始字符串:{{msg}}</p>
<p>计算属性反转：{{revMsg}}</p>
<p>methods反转字符串：{{revMsg2()}}</p>

computed:{
    revMsg:function(){
        return this.msg.split('').reverse().join('')
    }
},
methods:{
    revMsg2:function(){
        return this.msg.split('').reverse().join('')
    }
}

第二个p标签是用计算属性revMsg实现的，第三个是用methods方法调用的

---

三、setter和getter

computed:{
    fullname:{
        get:function(){
            return this.firstname+""+this.lastname
        },
        set:function(newVal){
            let arr=newVal.split('');
            this.firstname=arr[0];
            this.lastname=arr[1];
         }
     }
}

getter用于读取，setter写入触发