v-bind搭配v-model

### 结合 `v-bind` 和 `v-model` 的使用

在 Vue.js 中，`v-bind` 指令用于动态绑定 HTML 属性，而 `v-model` 提供双向数据绑定功能。两者可以协同工作来创建更灵活和交互式的表单组件。

#### 动态绑定属性并实现双向数据流

当希望基于某些条件或状态变化更新输入字段或其他元素的属性时，可利用 `v-bind` 来设置这些属性；同时为了保持视图与模型之间的同步，则可以通过 `v-model` 实现这一点。

下面是一个简单的例子展示了如何在一个文本框上应用这两种指令：

<div id="app">
  <!-- 使用 v-bind 绑定 placeholder -->
  <input :placeholder="message" v-model="dynamicMessage">

  <!-- 显示当前输入的内容 -->
  <p>您正在编辑的信息是: {{ dynamicMessage }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
  el: '#app',
  data() {
    return {
      message: '请输入一些文字...',
      dynamicMessage: ''
    }
  }
})
</script>

在这个案例里，`:placeholder` 是 `v-bind` 的缩写形式，它会根据 `data()` 方法返回的对象里的 `message` 字段自动调整 `<input>` 元素上的占位符文本[^1]。与此同时，`v-model` 将用户的键盘输入实时反映给 JavaScript 变量 `dynamicMessage` 并反过来影响页面显示的文字。

对于更加复杂的场景，比如处理带有选项的选择列表 (`<select>`)，也可以同样方式操作：

<select v-model="selectedOption" :disabled="isDisabled">
  <option disabled value="">请选择...</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<p>选中的选项是：<strong>{{ selectedOption }}</strong></p>

<button @click="toggleDisable">切换禁用状态</button>

这里不仅实现了选择项的数据绑定，还通过 `v-bind` 控制了整个下拉菜单是否可用的状态(`:disabled`)。点击按钮改变 `isDisabled` 的布尔值就可以启用/禁用该控件。