vue filter

Vue过滤器的基本使用

html部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="app">
<!--插值中的表达式-->
<input type="text" v-model="msg">
<h2>{{ msg ? 'YES' : 'NO' }}</h2>
<h2>{{ msg.split('').reverse().join('') | uppercase }}</h2>
<h2>{{ number + 1 | currency '₫' 0 }}</h2>
<!--自定义过滤器-->
<h2> {{ filterParam | customFilter}}</h2>
<!--
1.limitBy - test
2.限制只显示数字中前两条数据
-->
<ul>
<li v-for="item in dataArray | limitBy 2">name: {{ item.name }}----age: {{ item.age }}</li>
</ul>
<!--
1.filterBy - test
2.过滤出对象中name属性字段含有‘Chuck’值的数据,并且只显示该数据
3.in 后面可以跟多字段进行搜索
-->
<ul>
<li v-for="item in dataArray | filterBy 'Chuck123' in 'name' 'temp'">name: {{ item.name }}----age: {{ item.age }}</li>
</ul>
</div>

js部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
* 1.split 将字符串分割成数组
* 2.filter 接受两个参数,第一个是自定义名称,第二个是一个函数,并将值作为参数使用最后返回处理后的值
* 3.reverse 用于颠倒数组之前的顺序
* join 将数组按照指定分隔符进行分割,并返回一个字符串
* */
Vue.filter('customFilter', function(value) {
return value.split('').reverse().join('')
})
var vm = new Vue({
el: '#app',
data: {
msg: 'world',
number: 148547,
filterParam: 'small text!',
dataArray: [
{'name': 'Bruce', 'age': 1},
{'name': 'Chuck', 'age': 2, 'temp': 'Chuck123'},
{'name': 'Jack', 'age': 3},
]
}
})
坚持原创技术分享,您的支持将鼓励我继续创作!