属性

计算属性

new Vue({
   el:"#app",
   data:{
       msg:"123",
       birthday:158536
   }
   ,
    computed:{
       birth(){
           return new Date(this.birthday);
       }
    }
});

• 与方法的区别

不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值

getter与setter

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

侦听属性

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    // 当firstName属性发生改变，该方法会被调用
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

过滤器

• 定义过滤器

// 全局过滤器
Vue.filter('upper',function(v){
      return v.toUpperCase();
});

• 使用

<div id="app" :abc="msg | upper">
      {{msg | upper}}
</div>

• 传递参数

<div>
    {{msg | f('a')}}
</div>

Vue.filter('f',function(v,a){
    return v + a;
});