v-model实现双向数据绑定

GUfeifei___

于 2021-10-13 19:54:55 发布

阅读量1.3k

点赞数

文章标签： javascript html html5

本文链接：https://blog.youkuaiyun.com/GUfeifei___/article/details/120751034

版权

本文探讨了Vue.js中的v-model指令如何实现双向数据绑定，它在表单元素如input及textarea上创建这一绑定，并根据元素类型自动同步数据。v-model并不会考虑元素的初始值，而是依赖于Vue实例的数据作为源。要在组件中设置初始值，应在组件的data选项中声明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-model

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"<

最低0.47元/天解锁文章