14.computed属性和过滤器

14.1computed计算属性

• 表达式如果过长，或逻辑更为复杂时，就会变得臃肿甚至难以阅读和维护，在遇到复杂的逻辑时应该使用计算属性。
• 计算属性还可以依赖多个Vue实例的数据，只要其中任一数据发生变化，计算属性就会重新执行,视图也会更新。例如：

    
        
        
        
        
        
        
    
    
        
        

            

                

                    

                        {{goods.id}}
                    
                    

                        
                    
                    

                        {{goods.name}}
                    
                    

                        {{goods.price}}
                    
                    

                        -
                        
                        +
                    
                
            
            

                

                
Total price:
￥{{totalPrice}}
                
                

                结算
                
            
        

        
    

运行结果：

image.png

改变购买的数量,结果为：

image.png

总价会实时更新。

14.2过滤器

• 注意：过滤器应当用于处理简单的文本转换,如果要实现更为复杂的数据变换，因该使用计算属性。
• Vue.js支持在{{}}插值的尾部添加一个管道符“|”对数据进行过滤,经常用于格式化文本。过滤的规则是自定义的，通过给Vue实例添加选项filter来设置。

            {{date|formatDate}}
        
        

运行结果：

image.png

• 过滤器也可以串联，而且可以接收参数
  串联：{{message|filterA|filterB}}
  接收参数：{{message|filterA('arg1','arg2')}}