我们可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 等元素上创建双向数据绑定。

v-model 会根据控件类型自动选取正确的方法来更新元素。

 

v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值，使用的是 data 选项中声明初始值。

 

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text 和 textarea 元素使用 value 属性和 input 事件；

checkbox 和 radio 使用 checked 属性和 change 事件；

select 字段将 value 作为属性并将 change 作为事件。

输入框

实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定：

 

<div id="app">

  <p>input 元素：</p>

  <input v-model="message" placeholder="编辑我……">

  <p>input 表单消息是: {{ message }}</p>

    

  <p>textarea 元素：</p>

  <textarea v-model="message2" placeholder="多行文本输入……"></textarea>

  <p>textarea 表单消息是:</p>

  <p style="white-space: pre">{{ message2 }}</p>

  

</div>

 

<script>

const app = {

  data() {

    return {

      message: '',

      message2: '菜鸟教程\r\nhttps://www.runoob.com'

    }

  }

}

 

Vue.createApp(app).mount('#app')

</script>

 

 

在文本区域 textarea 插值是不起作用，需要使用 v-model 来代替：

<!-- 错误 -->

<textarea>{{ text }}</textarea>

 

<!-- 正确 -->

<textarea v-model="text"></textarea>