Question

有一个列表，其中根据数据的特定类型对其进行了隔离

要完成的任务：-仅显示所需类型的项目。

<script>
export default {
  data(){
    return{
    items:{
        {
          type: "a",
          text: "TEXT A"
        },
        {
          type: "b",
          text: "TEXT B"
        },
        {
          type: "b",
          text: "TEXT B-1"
        },{
          type: "a",
          text: "TEXT A-2"
        }
      }
    }
  }
  </script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <div v-if="type == a">
    <div v-for="(item,key) in items">
      <p>{{item.text}}</p>
    </div>
  </div>
</template>

Answer 1

您应该在v-for循环中放入条件渲染，例如：

<div >
  <div v-for="(item,key) in items">
  <p v-if="item.type == 'a'">{{item.text}}</p>
  </div>
</div>

或使用名为itemsTypeA的计算属性，仅返回类型== a并在模板内循环通过该属性的项目：

   computed:{
          itemsTypeA(){
              return this.items.filter(item=>{
              return item.type=='a'
              })
            }
        }

在模板内部：

 <div >
  <div v-for="(item,key) in itemsTypeA">
  <p>{{item.text}}</p>
  </div>
</div>

根据类型获取具有条件渲染的项目

1 个答案: