v-for与v-if

当在项目中使用v-for循环列表时，需要对列表中的数据进行判断是否展示，但是在vue中v-for的优先级比v-if高，会有性能问题，此时可以使用computed计算属性解决问题。

<template>
  <div class="data-show">
    <ul>
      <li v-for="item in filterList" :key="item.id">{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [
        {
          name: '张三',
          age: 11,
          id: 1
        },
        {
          name: '李四',
          age: 19,
          id: 2
        },
        {
          name: '王五',
          age: 45,
          id: 3
        }
      ]
    }
  },
  computed: {
    filterList() {
      let list = this.listData.filter(item => item.age > 18)
      return list
    }
  }
}
</script>