Vue 选择选项 v-for selected

在使用 Vue 开发 Web 应用程序时，我们通常需要在表单中提供下拉列表选择框，以方便用户选择数据。Vue 为我们提供了 v-for 和 v-model 两个指令，可以轻松地实现此功能。

使用 v-for 渲染选项

要使用 v-for 渲染选项，首先需要指定一个数组，然后使用 v-for 指令来遍历数组，并为每个数组项生成一个选项。下面是一个简单的示例：

<select>
  <option v-for="item in items" :value="item.id">{{ item.text }}</option>
</select>

在上面的示例中，我们为 <option> 元素使用了 v-for 指令来遍历名为 items 的数组，并为每个数组项生成一个选项。我们将选项的 value 属性设置为数组项的 id 属性，将选项的文本内容设置为数组项的 text 属性。

绑定 v-model 实现双向绑定

通常情况下，我们需要将用户选择的值绑定到 Vue 实例的数据中，以便在需要时可以使用这些值进行其他操作。这可以通过 v-model 指令实现。以下是一个示例：

<select v-model="selected">
  <option v-for="item in items" :value="item.id">{{ item.text }}</option>
</select>

在上面的示例中，我们将 v-model 指令应用于 <select> 元素，以将用户选择的值与名为 selected 的 Vue 实例数据属性双向绑定。每个选项的值都设置为数组项的 id 属性。

在 Vue 实例中，可以使用以下代码段定义 selected 属性：

new Vue({
  el: '#app',
  data: {
    selected: ''
    items: [
      { id: 1, text: 'Option 1' },
      { id: 2, text: 'Option 2' },
      { id: 3, text: 'Option 3' }
    ]
  }
})

在上面的代码段中，我们定义了一个名为 selected 的属性，并将其初始化为空字符串。我们还定义了一个名为 items 的数组，其中包含要在选项中呈现的数据。

将选项默认值绑定到 v-model

有时我们需要将选择框的默认选项与 v-model 绑定，以便在用户未进行选择时，将默认值设置为 Vue 实例数据属性的值。以下是一个示例：

<select v-model="selected">
  <option v-for="item in items" :value="item.id" :selected="item.id === selected">{{ item.text }}</option>
</select>

在上面的示例中，我们使用了 v-for 指令来遍历数组，使用 :selected 绑定选项的默认值。在此示例中，我们使用了一个三元运算符来确定哪个选项应该默认被选择。

总结

Vue 为我们提供了 v-for 和 v-model 两个指令，可以轻松地实现下拉列表选择框。我们可以使用 v-for 渲染选项，并使用 v-model 将用户选择的值与 Vue 实例数据属性双向绑定。此外，我们还可以将选项的默认值与 v-model 绑定。