使用watch和computed实现搜索功能学习笔记v1.0

使用watch监听来实现搜索功能

<template>
  <div class="key">
    <h2>人员列表</h2>
    <button @click.once="add">添加一个老刘</button>
    <input type="text" placeholder="请输入名字" v-model="keyWord" />
    <ul>
      <li v-for="(p, index) in filPerons" :key="index">
        {{ p.name }}-{{ p.age }}-{{ p.sex }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyWord: "",
      persons: [
        { id: "001", name: "马冬梅", age: 19, sex: "女" },
        { id: "002", name: "周冬雨", age: 20, sex: "女" },
        { id: "003", name: "周杰伦", age: 21, sex: "男" },
        { id: "004", name: "温兆伦", age: 22, sex: "男" },
      ],
      filPerons: [],
    };
  },
  //使用watch实现
  watch: {
    keyWord: {
      immediate: true,
      handler(val) {
        this.filPerons = this.persons.filter((p) => {
          return p.name.indexOf(val) !== -1;
        });
        console.log("keyWord", val);
      },
    },
  },

  //用computed实现
  methods: {
    add() {},
  },
};
</script>

<style></style>

watch数据监视实现

1. immediate: true, 可以停留在固定的位置。 比如：选项卡是否停留在02项，搜索列表是否显示
2. 为false是不停留在固定位置。
3. watch监视里有handel, 通过newVa和oldVal新旧值来监听变化。

watch和computed的区别：

1. computed计算属性里不存在newVa和oldVal新旧值，computed没有handel,所以filter里的indexOf
   里没有val.用户编号直接在indexOf里写this.keyWorld,来绑定用户输入的内容，就可以拿到用户输入的内容了。
2. 把新的数组值做为filPerons，所以return返回值。
3. 当watch和computed都可以实现的功能时，优先使用computed，因为watch相对于麻烦复杂。

使用computed计算属性来实现搜索功能

<template>
  <div class="key">
    <h2>人员列表</h2>
    <input type="text" placeholder="请输入名字" v-model="keyWord" />
    <ul>
      <li v-for="(p, index) in filPerons" :key="index">
        {{ p.name }}-{{ p.age }}-{{ p.sex }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyWord: "",
      persons: [
        { id: "001", name: "马冬梅", age: 19, sex: "女" },
        { id: "002", name: "周冬雨", age: 20, sex: "女" },
        { id: "003", name: "周杰伦", age: 21, sex: "男" },
        { id: "004", name: "温兆伦", age: 22, sex: "男" },
      ],
    };
  },
  // 用computed实现
  computed: {
    filPerons() {
      return this.persons.filter((p) => {
        return p.name.indexOf(this.keyWord) !== -1;
      });
    },
  },

  methods: {},
};
</script>

<style></style>