Vue知识整理，让你快速入门Vue.js：03_12.本地应用：v-model指令

被开发耽误的大厨

已于 2022-06-07 01:01:13 修改

阅读量241

点赞数

分类专栏： web前端（H5）文章标签： vue.js javascript 前端

于 2020-03-23 01:42:56 首次发布

本文为博主原创文章，不得随意转载，转载请注明出处！！！

本文链接：https://blog.csdn.net/YuDBL/article/details/105039175

版权

web前端（H5）专栏收录该内容

83 篇文章 15 订阅

订阅专栏

上一节我们对 v-on指令进行了补充的讲解，知道了它更多的用法，但是无论使用哪一种，都是在代码中预先定义好的内容。

一、v-model指令语法介绍

而我们在 web 开发中，经常需要去获取用户的输入，这也是我们这节所学的内容：v-model指令

它可以十分便捷的把表单元素的值和实例中的数据关联起来，这样我们就可以十分便捷的获取以及设置表单元素的值了。

当然它也有一个别的叫法叫做：双向数据绑定。

有了我们 v-model指令以后，我们就可以十分便捷的把表单元素的值和data中的数据进行绑定，

那么无论是设置，还是获取都会变得特别的简单快捷。

什么叫做双向呢？

当运行代码解析以后 message的值，就会同步到我们表单元素上。然后当我们更改表单元素的值以后，它也会把这次的更新同步到我们的 message上面，那么一来一回，这不就是两个方向嘛。所以双向数据绑定里面的双向，指的就是你更改两边的任何一边，他们都会同步更新对方的值。

二、实例代码演示

1、实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>18_v-model双向数据绑定</title>
</head>

<body>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <input type="text" v-model="message" @keyup.enter="getM"><br>
        <h2>{{message}}</h2><br>
        <input type="button" v-model="message" @click="setM">
    </div>


    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "你好,春天!",
            },
            methods: {
                getM:function(){
                    alert(this.message);
                },
                setM:function () {
                    this.message = "你也好！";
                }
            },
        })
    </script>

</body>

</html>

2、效果展示

当改变表单-文本值为“你好,春天!123”，

h2标签-插值表达式的值，也变为“你好,春天!123”，

说明：data中message值变为“你好,春天!123” 了

同时按下enter键，getM方法获取到的值，如下图弹出框

再次说明：data中message值为“你好,春天!123”。

所以说：改变表单-文本值，data中message值也相应改变

当我点击下面的按钮，setM方法修改data中message值，

h2标签-插值表达式的值、表单-文本值 都变为“你也好”

说明：data中message值改变，表单-文本值也相应改变

三、内容-总结

被开发耽误的大厨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue知识整理，让你快速入门Vue.js：03_12.本地应用：v-model指令

目录一、v-model指令语法介绍二、实例代码演示1、实例代码2、效果展示三、内容-总结上一节我们对 v-on指令进行了补充的讲解，知道了它更多的用法，但是无论使用哪一种，都是在代码中预先定义好的内容。一、v-model指令语法介绍而我们在 web 开发中，经常需要去获取用户的输入，这也是我们这节所学的内容：v-model指令它可以十分便捷的把表单元素的值和实......
复制链接

扫一扫