本文讲一下:在vue中，用于组件双向绑定的语法，v-model。

什么是组件呢？简单来说，就是拼接成网页的一个个元素。

我们制作网页就跟搭积木一样，这放一个button ，那放一个表单，这放一个div，那放一个导航栏。

这些东西通通都叫做组件。

1、基本用法

v-model 一般用在input、textarea、select这些元素里。

它的后面会跟一个ref构造的响应式变量。

当输入框里的内容发生变化时，这个变量也会变化。

• 用在输入框内

例如，在input和textarea元素内，输入字符串的同时，这些字符串也会打印在其它网页组件上。

代码如下

<script setup>
import { ref } from 'vue'

const message = ref('')
</script>

<template>
  <p>Message is: {{ message }}</p>
  <input v-model="message" placeholder="请输入" />
  <textarea v-model="message" placeholder="请编辑"></textarea>
</template>

从渲染的结果，可以看出，Message is:后面的内容，会跟输入框里的内容保持一致。

如下图所示：

• 用在复选框内

在html中，复选框有选中、未选中两种状态。

选中，则该复选框对应的变量为true；未选中，则该复选框对应的变量为false。

<script setup>
import { ref } from 'vue'

const checked = ref(true)
</script>

<template>
  <input type="checkbox" id="checkbox" v-model="checked" />
  <label for="checkbox">{{ checked }}</label>
</template>

这段代码渲染之后的结果是：当勾选时，label标签显示为true；当不勾选时，则显示为false。

如下图所示：

• 选择器

select选择器，也可以跟v-model配合使用。

需要注意的是：如果option里面有value属性，绑定的数据会与value值同步；如果option里面没有value，那么绑定的数据会直接使用option里面的值。

代码展示如下：

<script setup>
import { ref } from 'vue'

const selected = ref('')
</script>

<template>
  <span> Selected: {{ selected }}</span>

  <select v-model="selected">
    <option value="123">Please select one</option>
    <option value="985">A</option>
    <option>B</option>
    <option>C</option>
  </select>
</template>

网页渲染结果如下图所示：

2、v-model 修饰符

v-model配备了修饰符，使用方法就是在v-model+点+修饰符即可。

这里，展示一下lazy修饰符的使用方法。

<template>
  <input v-model.lazy="message">
  <p>输入的内容: {{ message }}</p>
</template>
<script setup>
import { ref } from 'vue';
const message = ref('');
</script>

lazy，顾名思义，就是懒惰的意思。

当使用lazy修饰符时，文本框输入的数据，并不会同步显示引用的位置。而是在敲入回车或者把光标移开之后，才会显示在引用的位置。

如下图所示：

除lazy修饰符，官方文档还提供了number、trim修饰符的使用方法。文章篇幅有限，这里不再一一展示了。

这些修饰符使用方法大同小异，大家可以在vue官网上查看具体的使用说明。

感谢阅读。如有代码方面的需求，欢迎合作。