如何在Vant中使用复选框组件创建多选商品功能？

翻滚的胖子
2023-07-19 11:14:07
前端技术
JavaScript Java

在本教程中，我们将学习如何在Vant中使用复选框组件创建多选商品功能。通过使用Vant提供的丰富组件和函数，我们可以轻松实现这一功能。

首先，我们需要在项目中引入Vant组件库。可以通过以下步骤来完成：

1	`npm install vant --save`

安装完成后，我们需要在项目中引入Vant的样式文件：

1	`import` `'vant/lib/index.css';`

接下来，我们可以在需要使用复选框组件的地方进行引入：

1	`import { Checkbox, CheckboxGroup } from` `'vant';`

复选框组件提供了多个参数，例如value、disabled、label等，用于配置复选框的属性。我们可以在代码中使用这些参数来实现多选商品功能。

下面是一个示例代码，展示了如何使用复选框组件来实现多选商品功能：

<template>
  <div>
    <van-checkbox-group v-model="selectedGoods">
      <van-checkbox v-for="item in goodsList" :key="item.id" :name="item.name" :value="item.id">
        {{ item.name }}
      </van-checkbox>
    </van-checkbox-group>
    <van-button @click="submit">提交</van-button>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const selectedGoods = ref([]);
    const goodsList = [
      { id: 1, name: '商品1' },
      { id: 2, name: '商品2' },
      { id: 3, name: '商品3' }
    ];
 
    const submit = () => {
      // 处理选中的商品
      console.log(selectedGoods.value);
    };
 
    return {
      selectedGoods,
      goodsList,
      submit
    };
  }
};
</script>