Vue.js 2.0.0 中 <select> 输入框的默认选中项：详尽指南

2024-03-07 22:15:52

使用 Vue.js 2.0.0 中 <select> 输入框的默认选中项

简介

<select> 输入框是一个常见的 HTML 元素，用于在 Web 应用程序中为用户提供一个选项列表供其选择。Vue.js 提供了 v-model 指令，允许轻松管理表单输入，包括设置 <select> 输入框的默认选中项。

设置默认选中项

要为 <select> 输入框设置默认选中项，请在 Vue 组件的 data 选项中指定 value 属性。

示例：

<select v-model="age">
  <option value="" disabled>Select Age</option>
  <option value="1">1 Year</option>
  <option value="11" selected>11 Year</option>
</select>

data() {
  return {
    age: "11", // 设置默认选中值为 "11"
  };
},

v-bind 和 watchers

使用 v-bind 指令设置 value 属性时，你需要在 watch 对象中使用 computed 属性来监控该属性的变化。

示例：

<select v-bind:value="age">
  <option value="" disabled>Select Age</option>
  <option value="1">1 Year</option>
  <option value="11">11 Year</option>
</select>

data() {
  return {
    age: null, // 初始值设置为 null
  };
},
computed: {
  ageValue: {
    get() {
      return this.age;
    },
    set(newValue) {
      this.age = newValue;
    },
  },
},
watch: {
  ageValue: function (newAge) {
    console.log("log here");
  },
},