VUE实现移动端列表筛选功能
时间: 2024-06-14 16:08:02 浏览: 21
Vue可以通过使用组件和数据绑定的方式来实现移动端列表筛选功能。以下是一个简单的示例:
1. 首先,创建一个Vue组件,用于展示列表和筛选功能:
```html
<template>
<div>
<input type="text" v-model="filterText" placeholder="输入关键字筛选">
<ul>
<li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
filterText: '',
list: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Orange' }
]
};
},
computed: {
filteredList() {
return this.list.filter(item => item.name.includes(this.filterText));
}
}
};
</script>
```
2. 在父组件中使用该列表组件:
```html
<template>
<div>
<h1>移动端列表筛选功能</h1>
<list-filter></list-filter>
</div>
</template>
<script>
import ListFilter from './ListFilter.vue';
export default {
components: {
ListFilter
}
};
</script>
```
在上述示例中,我们创建了一个名为`ListFilter`的Vue组件,其中包含一个输入框和一个列表。输入框通过`v-model`指令与`filterText`数据进行双向绑定,用户输入的关键字会实时更新到`filterText`中。列表通过`v-for`指令遍历`filteredList`,只展示符合筛选条件的项。
相关问题:
1. Vue是什么?
2. 什么是Vue组件?
3. 什么是数据绑定?
4. 什么是计算属性?
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)