使用Vue中 v-for循环列表控制按钮隐藏显示功能

使用Vue中v-for循环列表控制按钮隐藏显示功能分为以下几个步骤：

1. 在Vue实例中定义数据：需要定义一个存储列表数据的数组，以及每个元素对应的控制按钮是否显示的状态变量。比如：

data() {
  return {
    list: [
      { id: 1, name: 'item 1', showButton: false },
      { id: 2, name: 'item 2', showButton: true },
      { id: 3, name: 'item 3', showButton: false }
    ]
  }
}

1. 使用v-for循环展示列表：在模板中使用v-for指令遍历list数组，并展示每个元素的内容以及对应的控制按钮。比如：

<ul>
  <li v-for="item in list">
    {{ item.name }}
    <button v-if="item.showButton">控制按钮</button>
  </li>
</ul>

1. 给控制按钮绑定事件：为控制按钮绑定点击事件，切换其所在元素的showButton状态，实现按钮的显示和隐藏。比如：

<button @click="item.showButton = !item.showButton">控制按钮</button>

综合起来，完整的代码如下：

<template>
  <ul>
    <li v-for="item in list">
      {{ item.name }}
      <button v-if="item.showButton" @click="item.showButton = !item.showButton">控制按钮</button>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'item 1', showButton: false },
        { id: 2, name: 'item 2', showButton: true },
        { id: 3, name: 'item 3', showButton: false }
      ]
    }
  }
}
</script>

下面给出两个示例说明：

1. 控制列表中某个元素的按钮隐藏显示

如果需要只控制列表中某个元素的按钮隐藏显示，可以先在Vue实例中定义一个变量表示该元素是否显示按钮，然后在控制按钮的点击事件中修改该变量的值。比如：

data() {
  return {
    list: [
      { id: 1, name: 'item 1', showButton: false },
      { id: 2, name: 'item 2', showButton: true },
      { id: 3, name: 'item 3', showButton: false }
    ],
    showButton: false
  }
}

<template>
  <div>
    <button @click="showButton = !showButton">控制按钮</button>
    <ul>
      <li v-for="item in list">
        {{ item.name }}
        <button v-if="item.showButton && showButton" @click="item.showButton = !item.showButton">元素按钮</button>
      </li>
    </ul>
  </div>
</template>

1. 控制列表中所有元素的按钮隐藏显示

如果要同时控制列表中所有元素的按钮隐藏显示，可以直接修改每个元素的showButton状态。比如：

data() {
  return {
    list: [
      { id: 1, name: 'item 1', showButton: false },
      { id: 2, name: 'item 2', showButton: true },
      { id: 3, name: 'item 3', showButton: false }
    ],
    showButton: false
  }
}

<template>
  <div>
    <button @click="showButton = !showButton">控制按钮</button>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.name }}
        <button v-if="item.showButton && showButton" @click="item.showButton = !item.showButton">元素按钮</button>
      </li>
    </ul>
  </div>
</template>

注意要给v-for指令添加:key属性，保证循环中的元素唯一性。