v-for和v-if一起使用时

在实际的项目开发中，不会总是理想的情况

<script>
  data: [
    {
      label: '曾小贤',
      type: '1',
      value: 'zxx'
    },
    {
      label: '恐龙',
      type: '2',
      value: 'atm'
    },
    {
      label: '苹果',
      type: '3',
      value: 'pg'
    }
  ];
</script>

/**
  上面的数据是不同类型数据的集合，一共有3中不同的type，下面会有3个select选择框，分别是人类、动    
  物、水果。如果我们想分别取值怎么办，可能有些童鞋会这样写。
*/
<template>
  人类
  <el-select v-model="aaa">
    <el-option
      v-for="(item, index) in data"
      :key="index"
      :label="item.label"
      :value="item.value"
      v-if="item.type ==  '1'"  // 在这，别找了
    ></el-option>
  </el-select>
  动物
  <el-select v-model="bbb">
    <el-option
      v-for="(item, index) in data"
      :key="index"
      :label="item.label"
      :value="item.value"
      v-if="item.type ==  '2'" // 在这，别找了
    ></el-option>
  </el-select>
  水果
  <el-select v-model="ccc">
    <el-option
      v-for="(item, index) in data"
      :key="index"
      :label="item.label"
      :value="item.value"
      v-if="item.type ==  '3'" // 在这，别找了
    ></el-option>
  </el-select> 
</template>

在vue的官方文档中是这样说的： 注意我们不推荐在同一元素上使用 v-if 和 v-for。更多细节可查阅风格指南。当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。

而且这样写vscode会给你报警告，有强迫症的童鞋会受不了，那么面对后台返回的这种混合的数据我们该怎么办呢？ 计算属性！

<script>
  export default {
    computed: {
      loadList() {
        这里的type不多解释
        return (type) => {
          let newData = [];
          this.data.forEach(item => {
            if(item.type == type) {
             newData.push(item);
            }
          });
          return newData;
        };
      }
    }
  }
</script>
<template>
  人类
  <el-select v-model="aaa">
    <el-option
      v-for="(item, index) in loadList('1')"  // type 我们可以在这里传进来
      :key="index"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
  动物
  <el-select v-model="bbb">
    <el-option
      v-for="(item, index) in loadList('2')"
      :key="index"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
  水果
  <el-select v-model="ccc">
    <el-option
      v-for="(item, index) in loadList('3')"
      :key="index"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select> 
</template>

好了，如果你的后台不给你分累，你可以这样做！