vue中更加优雅的判断数据是否展示

 在项目中经常遇到很多数据是，某些数据不需要展示，例如循环中不需要展示张三和李四之前写法一般是 v-if='item !='张三' && item !='李四''

  <div v-for="(item, index) in list" :key="index">
      <span v-if='item !='张三' && item !='李四'>{{ item }}</span>
  </div>


 data() {
     return {
          list: ['张三', '李四', '王五'],
       };
  },

 这样数据很多会导致代码臃肿，简洁一点的写法:

<template>
    <div class="main">
        <div v-for="(item, index) in list" :key="index">
            <span v-if="hasName(item)">{{ item }}</span>
        </div>
    </div>
</template>

export default {
    data() {
        return {
            list: ['张三', '李四', '王五'],
        };
    },
 methods: {
        hasName(key) {
            let keys = ['张三', '李四'];
            return !keys.includes(key);
        },
   }

}