时间戳

首页 > 解决方案 > 根据数组列表显示/隐藏图像

javascript - 根据数组列表显示/隐藏图像

问题描述

我有一个标签列表和一个选定标签列表：

data () {
    return {
        tags: ['#tag1', '#tag2', '#tag3'],
        selectTags: ['#tag1', '#tag2', '#tag3'],
        images: {}
    }
},

有了它们，我创建了一个复选框循环：

<div v-for="tag in tags" :key="tag">
    <input type="checkbox" :id="tag" :value="tag" v-model="selectTags" checked>
    <label :for="tag">{{ tag }}</label>
</div>

此标签用作图像列表中的键。我想根据select Tags列表显示/隐藏图像。如果此图像在列​​表中键入，则图像显示。否则，它将被隐藏。

<template v-for="(tag, index) in images" v-show="selectTags.includes(index)">
    <figure class="thumb" v-for="path in tag['best']['paths']" :key="path">
        <img :src="path | formatImageURL" alt="">
    </figure>
</template>

这在页面加载和取消选中标签时不起作用。

标签： javascriptvue.js

解决方案

您不能v-show在元素上使用该指令template，它将无效。您需要在其中包含的子元素上使用它，在您的情况下是figure元素。

在此处查看相关的官方文档：

请注意，v-show 不支持该<template>元素，也不适用于 v-else。

推荐阅读