Vue3基础+代码语法+例子大全（六）——表单输入绑定

参考官网：​​​​​​Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

八、表单输入绑定

1、基本用法

你可以用 v-model 指令在表单 <input> 、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。

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

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

注意：

v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用 data 选项来声明该初始值。

（1）文本

v-model 的原理：本质上是两个操作：

1、 v-bind 绑定一个value事件；

2、v-on 给当前元素添加一个input事件。

data(){
    return{
        counter:0,
        msg:"helloworld",
    }
}

<input type="text" v-model="msg">
<!-- v-model绑定后，输入框里的数据改变，data里面的数据也跟着改变， -->
<!-- 下面 h2 里面的数据也会实时更新 -->
<h2>{
  {msg}}</h2>