7. Vue 使用 v-model 实现双向数据绑定

Devops海洋的渔夫

发布于 2022-01-17 09:18:28

6100

发布于 2022-01-17 09:18:28

文章被收录于专栏：Devops专栏

v-model使用说明

在Vue框架中，能够绑定表单元素数据的命令有v-bind和v-model，但是v-bind只能单向绑定（将data中的数据绑定到View视图中），而v-model则可以双向绑定（也就是View视图与数据M双向绑定改变）。

但是v-model也有一定的局限性，只能绑定「表单元素」，则v-bind可以绑定「各类元素」。

那么什么是「表单元素」呢？

「表单元素」：input(radio, text, address, email....) 、select、checkbox、textarea等。

下面来写一个双向绑定的示例。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .inner{
            width: 100%;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>

    <div id="app">

        <h4>{{ msg }}</h4>

        <!-- 使用v-model双向绑定msg数据 -->
        <input type="text" v-model="msg" >

    </div>

    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>

    <script>
        // 2. 创建一个Vue的实例
        var vm = new Vue({
            el: '#app',
            data: {
                msg: "hello world",
            },
            methods:{}

        })
    </script>

</body>
</html>

首先查看vm.msg数据，如下：