6. 计算属性

示例

<script>
  export default {
    data() {
      return {
        keyword: '',
        listData: [ 'apple', 'banana', 'orange', 'pear' ]
      };
    },
    computed: {
      searchList() {
        let tempArr = this.keyword ? [] : Array.from(this.listData)
        this.listData.forEach((value) => {
          if (this.keyword != '' && value.indexOf(this.keyword) != -1) {
            tempArr.push(value)
          }
        })
        console.log(tempArr)
        return tempArr;
      }
    },
  };
</script>

<template>
  <input type="text" v-model="keyword" placeholder="请输入关键词" />
  <ul>
    <li v-for="(item, index) in searchList" :key="index">{{item}}</li>
  </ul>
</template>