vue3循环里如何控制对应元素的隐藏与显示?

• Z时代
• 2024-02-23
• 分类：IT

<div v-for="(item,  i) in data" :key="i">
    <div v-for="(per,  j) in item" :key="j">
        <input v-if="show"></input>
        <button @onclick="showInput"></button>
    </div>
</div>

两层v-for，渲染了多组的input和button，如何点击button只控制对应input的显示与隐藏？
vue3的写法，铁子们，help

回答：

通过对应的index

回答：

如果是需要单独控制的话，最简单的方式就是为每一个 per 增加一个 show 的状态，如下 demo 即可

<div v-for="(item,  i) in data" :key="i">
    <div v-for="(per,  j) in item" :key="j">
        <input v-if="per.show"></input>
        <button @click="per.show = !per.show"></button>
    </div>
</div>

以上是 vue3循环里如何控制对应元素的隐藏与显示? 的全部内容， 来源链接： utcz.com/p/933147.html