V-for 遍历div绑定点击事件实现div下i标签隐藏或显示

V-for指令是Vue.js中用于循环遍历数组或对象元素的关键指令。如果你想在每个`<div>`元素下面添加一个`<i>`标签，并通过点击`<div>`来控制`<i>`的隐藏或显示，你可以这样做：

HTML结构:

<div v-for="(item, index) in items" :key="index">
  <button @click="toggleVisibility(index)">点击</button>
  <i :style="{ display: isHidden[index] ? 'none' : 'block' }">内容</i>
</div>

在这个例子中：
- `items`是一个包含你想遍历的数据的数组。
- `v-for`会创建一个独立的DOM元素，其中`item`是当前项的值，`index`是索引。
- 每个`<div>`有一个点击按钮(`@click="toggleVisibility(index)")`，当点击时会触发`toggleVisibility`函数并传入对应的索引。
- `isHidden`是一个与`items`同步的布尔数组，用于记录每个`<i>`元素是否应该隐藏。初始可以设置所有`isHidden`为`false`。
- `:style="{ display: isHidden[index] ? 'none' : 'block' }"`表示根据`isHidden[index]`的值动态改变`<i>`的样式，`display:none`隐藏，`display:block`显示。

JavaScript部分（通常放在Vue实例的methods里）:

data() {
  return {
    items: [...], // 定义你的数据
    isHidden: Array(items.length).fill(false)
  }
},
methods: {
  toggleVisibility(index) {
    this.isHidden[index] = !this.isHidden[index]; // 双向绑定，修改isHidden会影响视图
  }
}