表单输入绑定

表单元素无法使用插值写法，例如下面的写法是错误的:

vue

<input>{{val1}}</input>

在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。我们需要手动连接值绑定和更改事件监听器：

vue

<template>
  <div>
    <!-- 输入框 -->
    <input :value="val1" @input="event => val1 = event.target.value">
    <!-- 下拉框 -->
    <select :value="val2" @change="event => val2 = event.target.value">
      <option value="a">a</option>
      <option value="b">b</option>
    </select>
    <div>输入框的值:{{ val1 }}</div>
    <div>下拉框的值:{{ val2 }}</div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const val1 = ref(12345);
const val2 = ref('a');


</script>

v-model

上面的这种写法对于我们来说写起来是很麻烦的，为了简化这种写法，我们可以使用v-model来进行双向绑定

vue

<input v-model="val1" />

上面的这种写法就等价于

vue

<input :value="val1" @input="event => val1 = event.target.value" />

不止如此，v-model还可以用于各种不同类型的输入，<textarea>、<select>元素。它会根据所使用的元素自动使用对应的DOM属性和事件组合：

文本类型的 <input> 和 <textarea> 元素会绑定 value属性并侦听 input 事件；
<input type="checkbox"> 和<input type="radio">会绑定 checked属性并侦听 change 事件；
<select> 会绑定 value属性并侦听 change 事件。

也就是说，表单元素可以放心使用v-model将响应式状态绑定到元素属性，而无需判断表单元素的属性以及对应的更改事件

TIP

双向绑定是一种数据绑定的机制，在这种机制下，当数据发生变化时，视图会更新，而当视图发生变化时，数据也会更新。

表单输入绑定 ​

v-model ​

表单输入绑定

v-model