3.vue计算属性和过滤器

1.计算属性

Vue中的computed属性称为计算属性.它与methods不同,computed是响应式的,调用时要向属性那样访问;同时computed是带缓存的,并不是每次调用时都会执行.

• 练习1

        

            点击methods
            点击computed
        
        
    

通过上列代码可知computed的执行方式,如果git2()不加括号,那么执行该代码是,git2()会预执行,然后就没办法调用了

• 练习2

        

            

                

                    

                        {{goods.id}}
                    
                    

                        
                    
                    

                        {{goods.name}}
                    
                    

                        {{goods.price}}
                    
                    

                        -
                        
                        +
                    
                
                

                

                    
总价:{{totalPrice}}￥
                结算
                
                
共购买商品{{settlement}},共需支付:￥{{totalPrice}}
            
        
        
    

效果图

由于产品个数是双向绑定,所以可以添加或减少,而computed中引用的响应式属性发生变化后,总价和产品个数才会发生变化,其中:disabled如果一个元素不能被激活或获取焦点，则该元素处于被禁用状态。

• 过滤器
  vue是需要自定义过滤器的

    
        

            

                
                搜索
                
                    

                    

                        
                            {{article.title}}
                        
                        
                            

                                {{article.infor}}
                            
                        
                    
                    

                        
                    
                
            
        
        
    

如上,在computed中filter()会过滤掉除了item以外的所有元素,最后返回的数组就只剩下了含item元素的数组