Vue核心语法第十四篇：列表过滤

岁岁种桃花儿2026-08-24 9:04
一：代码

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表过滤</title>

  <script type="text/javascript" src="../../js/vue.js"></script>

</head>

<body>
  <!-- 准备好一个容器, -->
  <!-- 第一部：获取用户输入v-model -->
  <!-- 第二步，根据用户输入进行过滤,当用户输入内容变化的时候进行过滤。 -->
  <div id="root">
    <h2>人员列表</h2>
    <input type="text" placeholder="请输入名字" v-model="keyWord">
    <ul>
      <li v-for="p in filePersons" :key="p.id">{{p.name}}-{{p.age}}-{{p.sex}}</li>
    </ul>
  </div>
  <script>

    // 使用watch实现
    // Vue.config.productionTip = false
    // const vm = new Vue({
    //   el: '#root',
    //   data: {
    //     keyWord: '',
    //     persons: [
    //       { id: "001", name: "马冬梅", age: 13, sex: '男' },
    //       { id: "002", name: "周冬雨", age: 18, sex: '男' },
    //       { id: "003", name: "周杰伦", age: 20, sex: '男' },
    //       { id: "004", name: "温兆伦", age: 20, sex: '男' }
    //     ],
    //     filePersons: [
    //     ]
    //   },
    //   watch: {
    //     keyWord: {
    //       // 立即执行一次。
    //       immediate: true,
    //       handler(val) {
    //         this.filePersons = this.persons.filter((p) => {
    //           return p.name.indexOf(val) != -1;
    //         })
    //       }
    //     }
    //   }
    //   // ,
    //   // WATCH和data是平级关系
    //   // watch: {
    //   //   // a是new,b是old
    //   //   keyWord(a, b) {
    //   //     console.log("苏醒被改了")
    //   //     // 数组的过滤方法，return的是满足条件的数据。
    //   //     // 元数据不能修改，直接复制出来之后，修改。
    //   //     this.persons = this.persons.filter((p) => {
    //   //       return p.name.indexOf(a) != -1;
    //   //     })
    //   //   }
    //   // }

    // })



    //使用computed实现
    Vue.config.productionTip = false
    const vm = new Vue({
      el: '#root',
      data: {
        keyWord: '',
        persons: [
          { id: "001", name: "马冬梅", age: 13, sex: '男' },
          { id: "002", name: "周冬雨", age: 18, sex: '男' },
          { id: "003", name: "周杰伦", age: 20, sex: '男' },
          { id: "004", name: "温兆伦", age: 20, sex: '男' }
        ],
        filePersons: [
        ]
      },
      computed: {
        filePersons() {
          return this.persons.filter((p) => {
            return p.name.indexOf(this.keyWord) != -1;
          })
        }
      }

    })


  </script>

</body>

</html>
Vue核心语法第十四篇：列表过滤

一：代码

二：效果
