vue获取页面里所有复选框选中的值

在Vue.js中，获取页面内所有复选框选中的值通常需要通过`v-model`指令绑定数据属性，并利用事件监听或者计算属性来实现。以下是一个基本的例子：

首先，在HTML模板中，每个复选框可以这样设置：

<template>
  <div id="checkboxes">
    <input type="checkbox" v-model="selectedItems[]" :value="item.value" v-for="(item, index) in items" @change="updateSelectedItems(index)">
    <div v-for="item in selectedItems">{{ item }}</div>
  </div>
</template>

这里，`v-model`绑定了数组`selectedItems[]`，`:value`表示复选框的值，当复选框状态改变时，会触发`@change`事件。

然后，在你的Vue实例的data里初始化一个空数组：

export default {
  data() {
    return {
      items: [
        { value: 'Option 1' },
        { value: 'Option 2' },
        // ...更多选项
      ],
      selectedItems: []
    };
  },
  methods: {
    updateSelectedItems(index) {
      if (this.$event.target.checked) {
        this.selectedItems.push(this.items[index].value);
      } else {
        const value = this.items[index].value;
        this.selectedItems = this.selectedItems.filter(item => item !== value);
      }
    }
  }
}

在这个例子中，`updateSelectedItems`方法会在复选框变化时更新`selectedItems`数组。

如果你想一次性获取所有选中的值，可以直接访问`selectedItems`数组。如果你想在组件之外获取这些值，可以暴露一个方法供外部调用，或者使用Vuex管理状态。