介绍

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>

Vue 14 - computed实现列表过滤

介绍

效果展示

猜你喜欢