面试题：Vue中多选框组与数组绑定的基本实现

Question

在Vue项目中，给定一个包含多个爱好选项的数组，如['篮球', '足球', '音乐', '绘画']，请实现一个多选框组，将用户选择的爱好绑定到一个新的数组并在页面上实时显示。要求写出对应的模板、数据和方法代码。

Answer 1

<template>
  <div>
    <label v-for="(hobby, index) in hobbies" :key="index">
      <input type="checkbox" v-model="selectedHobbies" :value="hobby">
      {{ hobby }}
    </label>
    <p>选择的爱好: {{ selectedHobbies }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hobbies: ['篮球', '足球', '音乐', '绘画'],
      selectedHobbies: []
    };
  }
}
</script>