计算属性，侦听属性，过滤器

Vue计算属性及侦听属性和过滤器

计算属性computed

计算属性是用于复杂逻辑的计算，模板中若放入过多的逻辑会让模板过重且难以维护。

例子

1
2
3
4
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

如上述代码，模板

1
{{ reversedMessage }}

处会执行computed中的reversedMessage函数，进行复杂了逻辑的运算。

侦听属性watch

例子

1
<div id="demo">{{ fullName }}</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }

firstName和lastName是watch属性的两个函数，当和data中和它同名的元素的值发生改变时，就会触发对应的函数。一般用于侦听data的数据是否发生变化，故称为侦听属性。

除此之外，还有另一种写法：

1
2
3
firstName.$watch('firstNmae',function (val) {
      this.fullName = val + ' ' + this.lastName
    })

当firstName的值发生改变时，同样会执行函数。

过滤器

Vue过滤器的作用就是将原本的数据加工成想要的形式返回。

模板

1
{{msg | 过滤器名称}}

Vue自带过滤器

1.capitalize： 首字母变为大写

2.uppercase：所有英文字母变为大写

3.lowercase：所有英文字母变为小写

4.currency ：将数据变为货币形式，可传参，如

1
{{msg | currency '$' '3'}}

这里的意思是将msg以美元货币的形式传出，并且保留到小数点后三位。

5.pluralize ： 如果只有一个参数，复数形式只是简单地在末尾添加一个 “s”。如果有多个参数，参数被当作一个字符串数组，对应一个、两个、三个…复数词。如果值的个数多于参数的个数，多出的使用最后一个参数。

6.debouce ： 用作等待处理，一般用于函数延迟处理，如@click="disappear | debounce 1000">当点击时，disappear函数延迟1000毫秒执行，若不带时间参数，debounce的默认延迟时间为300毫秒。

7.limitBy ：需用于数组，一般用于截取的数组，可传入两个参数，第一个参数为取得的数量（即截取几个），第二个参数为偏移量（即从第几个开始）

8.filterBy ：需用于数组，可以过滤掉无关键字的，如v：for="item in arr | filterBy 'l' in 'name' ">此处会输出arr数组中的含有‘l’字符的‘name’的值。filterBy的第一个参数为关键字，第二个参数为属性名，中间用in连接。

9.orderBy ： 用于数组排序，可带一个参数，值为1或-1，当为1时，数组升序输出，为-1时，数组降序输出。

自定义过滤器

除了Vue中自带的过滤器，我们也可以自定义过滤器（否则Vue也太辣鸡了吧）。形式如下：

1
2
3
4
Vue.filter(过滤器的名字,function(参数)｛
	//函数体
	return 值（过滤出来最后的值）
｝)

双向过滤器

当然也可以定义一个读写形式的双向过滤器，形式如下：

1
2
3
4
5
6
7
8
Vue.filter(过滤器名称,{
	read:function(){

	},//只读
	write:function(){

	}//只写
})