你不知道的列表渲染和条件渲染一起使用

vue 中v-for根据条件列表渲染

在vue中,v-for是根据数据来渲染元素,
如果使用v-for根据需求指定来渲染就要使用以下技术

• 需要使用template标签来进行包裹,因为在渲染的时候,会忽略template标签的渲染
• 并且不能给template添加key值,因为key值必须添加到真是元素上,

现有一需求 :
------------------根据数据中的isDone为true用li标签渲染
------------------根据数据中的isDone为false用p标签渲染

需要使用template把p和li包裹在一起,对template使用v-for指令,再对p和li使用条件渲染,然后添加key值

<template>
  <div>
    <h1>列表渲染</h1>
    <template v-for="(item,index) in list ">
      <li
        v-if="item.isDone"
        :key="index"
      >{{item.name}}</li>
      <p
        v-else
        :key="index"
      >{{item.name}}</p>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: "甲", isDone: false },
        { name: "乙", isDone: false },
        { name: "丙", isDone: true },
        { name: "丁", isDone: false },
        { name: "戊", isDone: true },
        { name: "己", isDone: false },
        { name: "庚", isDone: true },
      ],
    };
  },
};
</script>

<style>
</style>

最终的渲染结果 :

对数据进行条件列表渲染总结 :

• 使用template标签包裹
• 给template使用v-for指令
• 对子元素使用v-if判断并给子元素添加key值