Vue指令之v-model

ShadyPi

于 2024-03-29 17:48:47 发布

阅读量304

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/ShadyPi/article/details/137152444

前端开发专栏收录该内容

9 篇文章

订阅专栏

本文介绍了Vue框架中的v-model指令如何实现视图与数据的双向绑定，通过一个HTML示例展示了如何在输入框中使用v-model，并展示了数据同步更新的过程。

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

调了半天没反应，结果是没引用Vue，我是伞兵。

v-model的作用是将视图与数据双向绑定。一般情况下，Vue是数据驱动的，即数据发生改变后网页就会刷新一次，更改对应的网页内容，即数据单向绑定了网页内容。而使用v-model双向绑定之后，网页发生改变（例如输入框）也会对应的修改数据。方便我们快速的修改/获取网页上的内容。

语法为v-model=变量名

一个简单的实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <div id="app">
        <label>用户名：<input type="text" v-model="username" placeholder="请输入用户名"></label> <br><!--br是换行符-->
        <button @click="reset">重置</button>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data:{
                username: ""
            },
            methods:{
                reset(){
                    this.username = ""
                }
            }
        })
    </script>

</body>
</html>