之前vue1.0的過濾器真的很好使,但是作者為了不讓搬運工變得太菜。硬是砍去了過濾器,為此,我還哭了好一陣,終於,一點一點的弄明白了過濾器是怎么回事后,也學明白了vue里的屬性監聽器computed以及框架里提供的filter的使用,覺得,作者這樣做是對的。
先來一個模糊搜索
<ul>
<li v-for="user in newUsers" >
{{ user.code }}
</li>
</ul>
new Vue({
el: '.app',
data: {
name: '',
users: [
{ code: '11111' },
{ code: '8797979' },
{ code: '4565465' },
{ code: '555555' },
{ code: '1006' },
{ code: '2555' },
]
},
computed: {
newUsers: function () {
var that = this;
return that.users.filter(function (user) {
return user.code.toLowerCase().indexOf(that.code.toLowerCase()) !== -1;//當然如果是純屬字就可以不用轉換小寫了,處於習慣還是加上了
})
}
}
})
接下來還有一個select的,其實官網有例子,但是我還是毫無保留的拿出來了。
<select v-model="selected" >
<option v-for="option in options" v-bind:value="option">
{{ option }}
</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
el: '.app',
data: {
selected: '30',
options: [
30,50,70,100
]
},
})
