Vue--1.6计算属性

概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。

语法：

1）声明在computed配置项中，一个计算属性对应一个函数。

2）使用起来和普通属性一样使用{{计算属性名}}

computed:{
    计算属性名(){
        一段代码逻辑（计算逻辑）
        return 结果
    }
}

  
  
  
  
  



    
礼物清单
    

        

            
名字
            
数量
        
        

            
{{item.name}}
            
{{item.num}}个
        
    
    
礼物总数：{{totalCount}}个

computed计算属性 vs methods方法

computed计算属性:

作用：封装了一段对于数据的处理，求得一个结果。

语法：

1）写在computed配置项中

2）作为属性，直接使用->this.计算属性{{计算属性}}

优点：缓存特性（提升性能）：计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算->并再次缓存

methods方法：

作用：给实例提供一个方法，调用以处理业务逻辑。

语法：

1）写在methods配置项中

2）作为方法，需要调用->@click="方法名"

计算属性默认的简写，只能读取访问，不能“修改”。如果要“修改”，需要写计算属性完整的写法。

computed:{
    计算属性名:{
        get(){
            一段代码逻辑（计算逻辑）
            return 结果
        },
        set(value){
            一段代码逻辑（修改逻辑）
        },
    }
}

  
  
  
  
  



    姓+名{{fullName}}
    

    改名卡