Vue如何为基于对象数据的选项设置“已选”

Vue可以通过使用v-model指令和计算属性来为基于对象数据的选项设置"已选"。

首先，确保你的Vue应用中已经引入了Vue框架。然后，在Vue实例中定义一个data属性来存储选项数据和选中状态。例如：

new Vue({
  el: '#app',
  data: {
    options: [
      { id: 1, name: '选项1', selected: false },
      { id: 2, name: '选项2', selected: true },
      { id: 3, name: '选项3', selected: false }
    ]
  }
});

接下来，在HTML模板中使用v-for指令遍历选项数据，并使用v-model指令绑定选中状态到每个选项的selected属性。例如：

<div id="app">
  <ul>
    <li v-for="option in options">
      <input type="checkbox" v-model="option.selected">
      {{ option.name }}
    </li>
  </ul>
</div>

现在，当用户勾选或取消勾选选项时，Vue会自动更新选项对象的selected属性。你可以在Vue实例中定义一个计算属性来获取已选中的选项。例如：

new Vue({
  el: '#app',
  data: {
    options: [
      { id: 1, name: '选项1', selected: false },
      { id: 2, name: '选项2', selected: true },
      { id: 3, name: '选项3', selected: false }
    ]
  },
  computed: {
    selectedOptions() {
      return this.options.filter(option => option.selected);
    }
  }
});

在上面的例子中，selectedOptions计算属性返回一个新数组，其中只包含已选中的选项对象。

这是Vue中基于对象数据的选项设置"已选"的一种方法。你可以根据实际需求进行调整和扩展。