1分钟入门教程VUE2.x极简开发(二)-双向绑定v-model

关注

原创最新推荐文章于 2026-08-19 07:40:56 发布 449 阅读 AI 写同款· GEO 优化 ›

Vue3项目实战：5分钟搞定UEditor富文本编辑器集成（附v-model绑定技巧）本文详细介绍了如何在Vue3项目中快速集成百度UEditor富文本编辑器。通过使用专为Vue3设计的`vue-ueditor-wrap`组件库，开发者可以轻松实现`v-model`双向数据绑定，并完成从环境配置、基础集成到高级功能定制（如上传接口配置、事件监听）的全过程，大幅提升开发效率。阅读详情

扫码关注微信订阅号不迷路

v-model指令

一、双向绑定v-model

一、双向绑定v-model

MVVM模式本身是实现了双向绑定的，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。
代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 此处是View-->
<div id="app">
    {{message}}
    <!--    双向绑定-->
    <input type="text" v-model="message"/>
</div>

</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    // 配合 谷歌浏览器的 调试工具 Vue Devtools 调试vue项目使用
    Vue.config.devtools = true
    // 此处是Model
    var exampleData = {
        message: "hello world !"
    }
    // 此处是创建一个 vue实例 或者 ViewModel ，他是连接View 与Model的。 这就是 VUE的 MVVM模型  Model-View-ViewModel
    new Vue({
        el: "#app",
        data: exampleData
    })
</script>

</html>

将message绑定到文本框，当更改文本框的值时，{{ message }} 中的内容也会被更新。
反过来，如果改变message的值，文本框的值也会被更新，我们可以在Chrome控制台进行尝试。

Vue实例的data属性指向exampleData，它是一个引用类型，改变了exampleData对象的属性，同时也会影响Vue实例的data属性。