Vue.js中filterBy过滤器导致网页直接白屏
一用这个方法就白屏,也没有报错,后来进vue官网一查才知道,filterBy被替换了以前是这样的写法:<p v-for="user in users | filterBy searchQuery in 'name'">{{ user.name }}</p>最新的方法:在 computed 属性中使用 js 内置方法 .filter method:<p v-for="user in filtered
·
一用这个方法就白屏,也没有报错,后来进vue官网一查才知道,filterBy被替换了
以前是这样的写法:
<p v-for="user in users | filterBy searchQuery in 'name'">{{ user.name }}</p>
最新的方法:在 computed 属性中使用 js 内置方法 .filter method
:
<p v-for="user in filteredUsers">{{ user.name }}</p>
computed: {
filteredUsers: function () {
var self = this
return self.users.filter(function (user) {
return user.name.indexOf(self.searchQuery) !== -1
})
}
}
自己的案例:
<div id="app">
<label for="filterName">筛选:</label>
<input v-model="searchText" id="filterName">
<ol>
<li v-for="user in filterName">{{user.name}}</li>
</ol>
</div>
<script>
let fb = new Vue(
{
el: '#app',
data: {
searchText: '',
msg: '飞机车',
users: [
{
name: '快车',
tag: 1,
},
{
name: '出租车',
tag: 2,
},
{
name: '顺风车',
tag: 3,
},
{
name: '专车',
tag: 4,
}
]
},
computed:{
filterName:function () {
let self=this
return self.users.filter(function (user) {
return user.name.indexOf(self.searchText)!==-1
})
}
}
}
);
</script>
更多推荐
已为社区贡献9条内容
所有评论(0)