Question

我有很多元素（大约30个）可以在点击时切换（隐藏/显示）。我使用v-show指令，但是我需要事先声明所有变量名称。如果我不声明它们，则v-show不起作用。这是不切实际的，因为每次元素更改时，我都必须在模板和列表中进行更改。

是否有一种方法可以在Vue中实现而无需预先声明变量，或者我必须在纯JavaScript Toggling many div id中的此答案中做类似的事情？

Answer 1

如果以编程方式生成变量，则可以实现

data() {
 return {
  items: [...Array(30).keys()].map(i => ({ id: i, isActive: true }))
 };
}

这将生成一个包含30个条目的对象，这些条目具有id和一个有关活动状态的标志。

您现在可以v-for覆盖它们，并根据id

处理点击

<div
  v-for="item in items"
  :key="item.index"
  v-show="item.isActive"
  @click="handleClick(item)"
>{{item.id}}</div>

最后是handleClick方法

methods: {
 handleClick(item) {
  item.isActive = false;
 }
},

可以找到一个有效的示例here

Answer 2

如果必须同时显示30个div，则可以执行此操作。

<template>
    <div>
        <a @click="!isActive">Toggle to Show Divs</a> <-- At click, isActive = !isActive -->
        <div id="1" v-if="isActive"></div> <!-- Show when isActive = true -->
        <div id="2" v-if="isActive"></div> 
        <div id="3" v-if="isActive"></div> 
        <div id="4" v-if="isActive"></div> 
        <div id="5" v-if="isActive"></div> 
        <div id="6" v-if="isActive"></div> 
        ...
    </div>
</template>

<script>
    export default {
        data() {
            return {
                isActive: false
            }
        },
    }
</script>

唯一的变量将是isActive

在不预先声明变量的情况下在Vue中切换许多div onclick

2 个答案: