Vue3 表单输入绑定 --- Vue3后台管理系统源码下载

Vue3后台管理系统源码下载： https://www.eleadmin.cn

表单输入绑定

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

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

v-model 指令帮我们简化了这一步骤：

<input v-model="text" />

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

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

基本用法

文本

<p> Message is: {{ message }}</p>

<input v-model="message" placeholder="edit me" />