vue v-for跳过指定的某条数据

Question

渲染的时候怎么不渲染，isShow:false这条数据

   list:[
        {
            id:'1',
            name:'a',
            isShow:'false'
        },
        {
            id:'2',
            name:'b',
             isShow:'true'
        },
        {
            id:'3',
            name:'c',
             isShow:'true'
        }
    ]

Answer 1

通过计算属性将数据过滤后再进行渲染。

getList() {
    return this.list.filter(item => item.isShow)
}

Answer 2

注意了，你list里的isShow属性用了'true', 'false'，这是字符串类型，建议去掉引号
根据你给的数据类型，我写了两种vue模板，都是可以实现你的需求的。

方法一：使用style属性控制显示

<template>
    <ul>
        <li v-for="item in list" :key="item.id" :style="{display: item.isShow=='true'?'block':'none'}">
            {{item.name}}
        </li>
    </ul>
</template>

方法二：使用v-show控制

<template>
    <ul>
        <li v-for="item in list" :key="item.id" v-show="item.isShow=='true'">
            {{item.name}}
        </li>
    </ul>
</template>

Answer 3

利用抽象组件

<ul>
    <template v-for="item in list" :key="list">
        <li v-if="item % 2 === 0">{{item}}</li>
    </template>
</ul>

Answer 4

• 不能使用v-if 会发出警告。
• 可以提前过滤掉数据
• 可以添加class标记隐藏

Answer 5

建议使用处理过的数据进行for渲染
实在不行，渲染的时候，根据isShow渲染对应的css 来display:none这个元素

Answer 6

filter过滤掉

Answer 7

计算属性可以试试