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

本文链接：https://blog.csdn.net/prefectjava/article/details/112309445

"本文详细介绍了Vue.js中的v-model指令，它是MVVM模式下实现双向数据绑定的关键。通过一个简单的代码示例展示了如何在HTML表单元素上使用v-model，实现文本框与message变量的双向绑定。当文本框值改变时，{{message}

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

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

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属性。