介绍
Vue列表过滤是Vue框架提供的一种列表过滤功能,可以让你轻松地过滤和显示特定的数据列表。
Vue列表过滤的实现通常涉及以下几个步骤:
-
首先,定义一个包含所有数据的列表,该列表可以是从API获取的数据,也可以是本地的静态数据。
-
接下来,定义一个用于过滤数据的输入框或下拉框,让用户可以输入或选择要过滤的关键字或条件。
-
然后,使用Vue的计算属性或过滤器来过滤列表数据。计算属性可以返回根据过滤条件过滤后的数据列表,而过滤器可以在模板中使用,对数据进行筛选并渲染到页面上。
-
最后,在页面上使用过滤后的数据列表进行渲染,通常使用v-for指令进行遍历展示。
以下是一个使用Vue列表过滤的示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本列表</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 遍历数组, 用的最多-->
<h2>人员列表</h2>
<!-- <button v-on:click.once="addPerson">添加人员</button> -->
<input type="text" placeholder="请输入名字" v-model="nameKeyWord">
<ul>
<!-- index是遍历时候的索引值,小括号可以不写,写了更加安全,不会引发不必要的问题 -->
<li v-for="(p, index) in filPersonArr" :key="p.id">{{p.name}} - {{p.age}} - {{p.sex}}</li>
</ul>
</div>
</body>
<script>
Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
new Vue({
el: '#root',
data: {
personArr: [
{ id: "001", name: '张译', age: 18, sex: '男' },
{ id: "002", name: '张颂文', age: 19, sex: '男' },
{ id: "003", name: '肖战', age: 20, sex: '男' },
{ id: "004", name: '赵丽颖', age: 20, sex: '女' },
],
nameKeyWord: ''
},
computed:{
filPersons(){
// 计算属性规定,需要返回知道是什么值
return this.personArr.filter((p)=>{
//过滤语法规定,需要return返回值
return p.name.indexOf(this.nameKeyWord)!==-1
})
}
}
})
</script>
</html>
效果展示