Vant 多选选择器组件使用教程 - 基于 Vue.js 的移动端组件库

Vant 是一个基于 Vue.js 的移动端组件库，它提供了一系列的组件和工具来帮助开发者快速构建移动端应用。其中，Vant 也提供了多选选择器组件。

在 Vant 中，多选选择器组件可以通过 <van-checkbox-group> 来实现。该组件可以包含多个 <van-checkbox> 子组件，每个子组件代表一个选项。用户可以通过勾选多个选项来进行多选操作。

以下是一个简单的示例代码：

<template>
  <div>
    <van-checkbox-group v-model='selectedOptions'>
      <van-checkbox v-for='option in options' :key='option.value' :name='option.value' :label='option.label' />
    </van-checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' },
      ],
      selectedOptions: [],
    };
  },
};
</script>

在上述示例中，<van-checkbox-group> 组件通过 v-model 来绑定选中的选项，选中的选项将会保存在 selectedOptions 数组中。通过循环遍历 options 数组，可以动态生成多个 <van-checkbox> 子组件，每个子组件代表一个选项。

这样，用户就可以通过勾选多个选项来进行多选操作。