vue实现筛选
时间: 2023-07-07 12:20:44 浏览: 115
要实现筛选功能,可以使用Vue的计算属性和v-model指令。假设你有一个数据列表dataList,其中每个对象都有一个属性name,你想按照name进行筛选,可以这样实现:
1. 在data中定义一个searchName属性,用于存储用户输入的筛选关键字。
2. 在模板中使用v-model绑定输入框和searchName属性:
```html
<input type="text" v-model="searchName"/>
```
3. 定义一个计算属性filteredData,它返回一个经过筛选后的数据列表:
```javascript
computed: {
filteredData: function() {
var self = this;
return this.dataList.filter(function(item) {
return item.name.indexOf(self.searchName) !== -1;
});
}
}
```
4. 在模板中使用filteredData来渲染列表:
```html
<ul>
<li v-for="item in filteredData">{{ item.name }}</li>
</ul>
```
这样,用户输入筛选关键字后,列表会根据关键字进行实时筛选。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)