van-sidebar的v-model 用v-for怎么绑定

如果你想使用 `v-for` 来创建多个 `van-sidebar` 组件，并且希望通过 `v-model` 来绑定每个组件的状态，可以按照以下步骤进行操作：

1. 在父组件中定义一个数组来存储所有的 `van-sidebar` 组件的状态，例如：

data() {
  return {
    sidebarList: [
      { title: 'Sidebar 1', active: false },
      { title: 'Sidebar 2', active: false },
      { title: 'Sidebar 3', active: false }
    ]
  }
}

2. 在父组件中使用 `v-for` 来创建多个 `van-sidebar` 组件，并将每个组件的状态绑定到 `sidebarList` 数组中的对应项，例如：

<template>
  <div>
    <van-sidebar v-for="(sidebar, index) in sidebarList" :key="index" v-model="sidebar.active">
      {{ sidebar.title }}
    </van-sidebar>
  </div>
</template>

在上面的代码中，`v-for` 循环遍历 `sidebarList` 数组，并使用 `:key` 绑定每个组件的唯一标识符。然后，使用 `v-model` 将每个组件的 `active` 状态绑定到 `sidebarList` 数组中对应的项上。

3. 在子组件 `van-sidebar` 中，需要使用 `value` 和 `input` 事件来实现 `v-model` 的双向绑定。例如：

<template>
  <div class="van-sidebar" :class="{ 'van-sidebar--active': value }">
    <div class="van-sidebar__content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: Boolean
  },
  methods: {
    handleClick() {
      this.$emit('input', !this.value)
    }
  }
}
</script>

在上面的代码中，组件接受一个名为 `value` 的布尔类型的 `props`，并在组件的根元素上根据 `value` 的值动态绑定 `van-sidebar--active` 类。同时，组件通过 `handleClick` 方法在点击时触发 `input` 事件，将当前状态的相反值传递给父组件。

这样，当你点击每个 `van-sidebar` 组件时，对应的状态会在父组件的 `sidebarList` 数组中进行更新，从而实现了 `v-model` 的双向绑定。