Vue中computed和watch示例区别

明知山

发布于 2021-03-15 18:39:18

35700

代码可运行

文章被收录于专栏：前端开发随笔前端开发随笔

运行总次数：0

代码可运行

computed示例

<template>
  <div class="box">
    <input type="text" v-model="keyCode" placeholder="筛选" />
    <ul>
      <li v-for="(item, index) in filterCode" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyCode: "",
      list: ["apple", "huawei", "sony", "oppo", "vivo"],
    };
  },
  computed: {
    filterCode() {
      var arr = [];
      for (let i in this.list) {
        if (this.list[i].indexOf(this.keyCode) != -1) {
          arr.push(this.list[i]);
        }
      }
      return arr;
    },
  },
};
</script>

watch示例

<template>
  <div class="box">
    <input type="text" v-model="firstName" placeholder="姓" />
    <input type="text" v-model="lastName" placeholder="名" />
    {{ fullName }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "",
      lastName: "",
      fullName: "",
    };
  },
  watch: {
    firstName(value) {
      this.fullName = `${value}${this.lastName}`;
    },
    lastName(value) {
      this.fullName = `${this.firstName}${value}`;
    },
  },
};
</script>

computed