前端应用_Vue_利用v-model达到表单双向数据绑定

最新推荐文章于 2020-03-05 15:15:00 发布

原创最新推荐文章于 2020-03-05 15:15:00 发布 · 362 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue.js 专栏收录该内容

46 篇文章

订阅专栏

本文详细介绍了Vue.js框架中v-model指令的功能与使用场景，对比了v-bind的单向数据绑定，强调了v-model在实现双向数据绑定中的优势，并通过示例代码展示了其在表单元素上的应用。

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

v-model 指令是vue 指令中最常用的，前面的章节我讲过 v-bind , 只能达到利用里面的值，如果想修改后，再保存是实现不了的，有一个方法就是额外的写方法。

v-model 就是为了解决这个问题应运而生。

举个例子吧
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100%;
        }
        .box2{
            width: 200px;
            height: 100px;
            background-color: pink;
            margin:50px auto;
        }
    </style>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
    </script>
</head>
<body>
<div id="pp" >

    <div>{{message2}}</div>
    <input type="text" :value="message2" class="box">
    
</div>
<div>
    <script>
        var vue=new  Vue(
            {
                el: '#pp',
                data: {
                    message: 'Hello,Vue',
                    message2: '我是一个超大的head，请避让下',
                    title: '我是一个可以点击的button',
                    value: 'SAVE',
                }
            }
        )
    </script>

</div>
</body>
</html>

在这里插入图片描述

通过上边的演示， v-bind 并不能达到双向，他只是单向取值，

修改为 v-model ：

<input type="text" v-model:value="message2" class="box">

用v-model 试试，看看效果怎么样如图：

在这里插入图片描述

总结：

v-model 只能运行在表单元素中
表单元素包括 input （checkbox ，radio，address，email ），select ，textarea