Vue-2-计算属性、侦听器、过滤器、样式绑定

一、计算属性

???不能用()=>{} 保持疑问，lambda不加this,mes2无定义；加this，undefined

computed:{
    // caption:function () {
    //     return this.mes2.toUpperCase()
    // }
    caption:()=>{ return this.mes2.toUpperCase() } // ??? 不能lambda嘛？？？？
},

1. 与方法比较

    
   
        
   {{fullName()}}
        
   {{com_fullName}}
    
    
    
   

   计算属性：与数据依赖绑定，只有数据变时才重新计算；有缓存
   函数：事件发生时就调用
   计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

2. 下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

    computed: {
      now: function () {
        return Date.now()
      }
    }
   

3. 使用方式

   1. 无get和set

       computed:{
           com_fullName:function () {
               return this.firstName+this.lastName
           }
       }
      

   2. get 和 set

       
      
           
      {{fullName()}}
           
      {{com_fullName}}
           改变名字
       
       
       
      

二、侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

1. 普通侦听

    
   
        
        
            movie
            play
            music
        
    
    
    
   

2. 深度侦听

   改变[{},{}]类型等内部信息时

    tags:{
        halder:function (newVal) {
            console.log(newVal)
        },
        deep:true
    }
   

三、过滤器

加参数 more(name)

    
{{mes1 | more}}
    

        
{{item | more2}}
    

全局过滤：放在Vue实例之前

Vue.filter('more',(data) => {
    if(data)
        return data.length>5?data.slice(0,5)+'...':data;
    else return null
});

计算属性实现搜索，过滤器好像不行？？？

    
{{condition}}
    
    

        
{{item.name}}
    

四、样式 class 和 style 绑定

    
    
    
    




    按钮

1. vue样式-导航条

    
        
        
        
        
    
    
    
    
   
        
   
            
   {{item}}