vue-model过滤1.0.x与2.0.x版本的区别

文章导航

×
  1. 1. vue.1.0
  2. 2. vue.2.0

Vue.js 升级后的过滤语法变动,在 computed 属性中使用js内置方法 .filter method,js原生的 .filter 同样能实现很多复杂的过滤器操作,因为可以在计算 computed 属性中使用所有js方法

vue.1.0

1
2
3
4
5
6
7
8
9
<div id="filter-by-example">
<input v-model="name">
<ul>
<li v-for="user in users | filterBy name in 'name'">
{{ user.name }}
</li>
</ul>
</div>
<script src="js/vue.js"></script>
1
2
3
4
5
6
7
8
9
10
11
new Vue({
el: '#filter-by-example',
data: {
name: '',
users: [
{ name: 'Bruce' },
{ name: 'Chuck' },
{ name: 'Jackie' }
]
}
})

如果直接用1.0的语法的话报错
vue2.0.3.js:2611 [Vue warn]: failed to compile template:

  • invalid expression: v-for=”user in users | filterBy name in ‘name’”

(found in root instance)

vue.2.0

1
2
3
4
5
6
7
8
9
10
11

<div id="filter-by-example">
<input v-model="searchQuery">
<ul>
<li v-for="user in filteredUsers" >
{{ user.name }}
</li>
</ul>
</div>

<script src="js/vue2.0.3.js"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    new Vue({
el: '#filter-by-example',
computed: {
filteredUsers: function () {
var self = this
return self.users.filter(function (user) {
return user.name.indexOf(self.searchQuery) !== -1
})
}
},
data: function() {
return {
searchQuery:'',
users: [
{ name: 'hruce' },
{ name: 'Chuck' },
{ name: 'Jackie' }
]
}
}
})

版权声明: 本文章采用 知识共享署名 2.5 中国大陆许可协议 进行许可,欢迎转载,但转载请注明来自李立冬博客,并保持转载后文章内容的完整。本人保留所有版权相关权利。
本文链接:http://www.lilidong.cn/2016/11/01/vue-model过滤1.0.x与2.0.x版本的区别/

分享到: 更多