进行动态值绑定

在前一节的示例应用中，我们仅通过 v-model 就获得了单选按钮、复选框和选择选项的字符串或布尔值。我们可以通过使用 true-value、false-value 和 v-bind 来修改这些默认值。下面我们来具体探讨。

替换布尔值 - 复选框元素

我们可以通过使用 true-value 和 false-value 为单选框元素绑定自定义值。例如，我们可以用 yes 替换默认的布尔值 true，用 no 替换默认的布尔值 false：

// src/components/dynamic-values.vue
<input
  type="checkbox"
  v-model="form.subscribe"
  true-value="yes"
  false-value="no"
>

export default {
  data () {
    return {
      form: { subscribe: 'no' }
    }
  },
  methods: {
    checkForm (e) {
      this.errors = []
      if (this.form.subscribe !== 'yes') {
        this.errors.push('必须订阅')
      }
    }
  }
}

现在，当您将订阅输入的值发送到服务器时，会得到 yes 或 no 的响应。在 <script> 块中，我们现在将 no 声明为 subscribe 属性的初始值，并在 if 条件块中验证它，确保在点击提交按钮时始终为 yes，否则将错误消息推送到 errors 数组中。

使用动态属性替换字符串 - 单选框元素

对于单选按钮 <input> 元素，我们可以通过 v-bind 将其值绑定到 Vue 实例中的动态属性：

// src/components/dynamic-values.vue
<input type="radio" v-model="form.gender" v-bind:value="gender.male">

export default {
  data () {
    return {
      gender: {
        male: 'm',
        female: 'f',
        other: 'o'
      },
      form: { gender: null }
    }
  }
}

当选择该单选按钮时，现在会获取到值 m，其验证逻辑与之前保持一致。

使用对象替换字符串 - select 选项元素

我们还可以使用 v-bind 将非字符串值（如对象）绑定到表单输入元素。请看以下示例：

// src/components/dynamic-values.vue
<select v-model="form.favourite">
  <option v-bind:value="{ title: 'On the Origin of Species' }">On the Origin of Species</option>
</select>

export default {
  data () {
    return {
      form: {
        favourite: null
      }
    }
  }
}

当选择该选项时，typeof this.favourite 将返回 object 类型，而 this.favourite.title 的值为 "物种起源"。验证逻辑保持不变。

我们还可以结合 v-for 动态渲染 <option> 元素并绑定动态值：

// src/components/dynamic-values.vue
<select v-model="form.favourites" name="favourites_array[]" multiple>
  <option v-for="book in options.books" v-bind:value="book.value">
    {{ book.text }}
  </option>
</select>

data () {
  return {
    form: { favourites: [] },
    options: {
      books: [
        { value: { title: '物种起源' }, text: '物种起源' },
        { value: { title: '时间简史' }, text: '时间简史' },
        { value: { title: '自私的基因' }, text: '自私的基因' }
      ]
    }
  }
}

现在我们不再需要硬编码 <option> 元素，可以从 API 等外部数据源动态获取 books 数据。

除了为表单输入绑定动态值外，我们还可以修改 v-model 在输入元素上的默认行为。例如，可以使用 change 事件替代默认的数据同步机制。我们将在下一主题中探讨具体实现方式。