用vue写一个，在界面上添加多个复选框，当选中某些选项时，将选择结果在下方如下格式显示:你的第一个选择是:xxx，用checkbox，创建多个复选框，并用相同的name选中复选框，并且input有value属性后加篮球等选项，写在. vue文件里

要在Vue.js中创建一个包含多个复选框并显示选中的选项，首先需要安装Vue，并在`.vue`文件中设置基本结构。以下是基本步骤：

1. 安装Vue CLI（如果你还没有安装）：

npm install -g @vue/cli

2. 创建一个新的Vue项目：

vue create checkbox-app
cd checkbox-app

3. 进入`src/components`目录，创建一个名为`CheckboxList.vue`的新组件：

<template>
  <div>
    <!-- 复选框列表 -->
    <div v-for="(option, index) in options" :key="index">
      <input type="checkbox" :id="`option_${index}`" :name="checkboxName" :value="option.value">
      <label :for="`option_${index}`">{{ option.label }}</label><br>
    </div>

    <!-- 显示选中的选项 -->
    <p v-if="selectedOptions.length > 0">你的选择是:</p>
    <ul v-if="selectedOptions.length > 0">
      <li v-for="(option, index) in selectedOptions" :key="index">
        {{ option }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { label: '篮球', value: 'basketball' },
        { label: '足球', value: 'football' },
        { label: '网球', value: 'tennis' },
        // 添加更多选项...
      ],
      checkboxName: 'sports',
      selectedOptions: [],
    };
  },
  methods: {
    handleCheckChange(event) {
      if (event.target.checked) {
        this.selectedOptions.push(event.target.value);
      } else {
        const index = this.selectedOptions.indexOf(event.target.value);
        if (index !== -1) {
          this.selectedOptions.splice(index, 1);
        }
      }
    },
  },
};
</script>

<style scoped>
/* 样式可以根据需求定制 */
</style>

在这个组件中，我们创建了一个循环列表，每个复选框都有唯一的`id`和相同的`name`。当用户选择或取消选择某个选项时，我们会更新`selectedOptions`数组。`handleCheckChange`方法负责监听复选框的改变。

现在你可以在主App组件中引用这个`CheckboxList`组件：

<template>
  <div id="app">
    <CheckboxList :options="options"></CheckboxList>
  </div>
</template>

<script>
import CheckboxList from '@/components/CheckboxList.vue';

export default {
  components: {
    CheckboxList,
  },
};
</script>

这将在页面上展示复选框和已选项目的列表。当你运行`npm run serve`，你会看到一个简单的示例应用。记得在`main.js`中引入Vue库。