前言
在前面介绍了v-bind样式绑定中，也提到了数据绑定，在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦：
代码语言：javascript复制<input
:value="text"
@input="event => text = event.target.value">所以vue提供了另一个基础属性v-model 指令帮我们简化了这一步骤：
<input v-model="text">另外，v-model 还可以用于各种不同类型的输入，<textarea>、<select> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合，本文将为介绍如何在Vue3中使用v-model指令实现双向数据绑定。
代码案例
在介绍代码案例之前，先讲一下v-model作用及语法结构：
作用:在表单元素上使用，双向数据绑定。可以方便的 获取 或 设置 表单项数据
语法:v-model="变量名
这样就可以实现vue中数据跟表单中的双向数据绑定，视图改变影响数据，数据变化影响视图
接下来通过代码案例，演示视图改变影响数据，数据变化影响视图
代码语言：javascript复制<div id="app">
<!-- 搜索框-->
<input type="text" v-model="searchText">
<button v-on:click="search">搜索</button>
<span>{{searchText}}</span>
</table>
</div>
<script type="module">
// 步骤2 引入vue模块 在线CDN的引入方式，从vue.esm-browser.js获取到createApp
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
// 步骤3 创建Vue实例，挂载到app div上
createApp({
// 步骤4 定义数据这些数据会跟上面绑定的div关联
data() {
return {
searchText: ''
}
},
methods: {
search: function () {
console.log(this.searchText);
},
},
}).mount('#app')
</script>这段代码主要是定义一个input元素，用于输入搜索文本。使用v-model指令将其值与Vue实例的searchText数据属性进行双向绑定。
button用于触发搜索操作，使用v-on:click指令将其点击事件绑定到Vue实例的search方法，实现视图改变影响数据。
在span标签，用于显示实时更新的搜索文本。使用双花括号{{searchText}}将其值与Vue实例的searchText数据属性进行绑定，实现数据变化影响视图
最终就是searchText会影响到整个vue app。
总结
在本文中，我们介绍了如何在Vue3中使用v-model指令实现双向数据绑定。通过使用v-model指令，您可以轻松地实现表单元素与Vue实例的数据属性之间的双向绑定，从而实现数据的实时更新和自动同步。这也是后续，实现视图数据重新渲染的关键，可以将绑定数据提交到接口，接口参数最终返回新的的数据。
我正在参与2024腾讯技术创作特训营最新征文，快来和我瓜分大奖！
