属性

计算属性

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;});