Vue3-笔记六(双向绑定) vue双向绑定怎么用

前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量，在Vue中提供了简单的方法

原来我们需要这样做：
<input
  :value="text"
  @input="event => text = event.target.value">

现在提供了v-model指令简化了
<input v-model="text">

其中文本类型：input textarea元素绑定value，会监听input事件；

checkbox,radio绑定checked，会监听change事件；select绑定value也是监听change事件。

使用：

<p>Message is: {{ message }}</p>
<input v-model="message"/>

如果 v-model 表达式的初始值不匹配任何一个选择项，<select> 元素会渲染成一个“未选择”的状态

修饰符

.lazy ：简单说就是原本应该是监听input事件，现在是监听change事件
.number ：让用户输入自动转换为数字，如果该值无法被 parseFloat() 处理，那么将返回原始值。
.trim ：默认自动去除用户输入内容中两端的空格

组件上的v-model后边组件时再说