Vue

Vue的双向数据绑定

2021年7月8日 /

一 什么是Vue的双向数据绑定

从Vue的突出优势MVVM，我们知道当model数据层的数据发生变化时，其视图层view上的数据会跟着变化；反之，当视图层view上的数据改变的话，也会同步到model数据层。注意，它们二者之间的数据变化是通过ViewModel层来传递数据变化的。

我们所说的双向绑定，只是针对UI控件即User Input而言的。非UI控件并不涉及到双向数据绑定。单向数据绑定是使用状态管理工具的前提，如果我们使用vuex,那么数据流也是单向的，这时和双向数据绑定相冲突。

我们是通过v-model来实现的双向数据绑定。

二双向数据绑定demo

1输入框的双向数据绑定
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>6双向数据绑定</title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <label for="fname">Firstname:</label><br>
            <input type="tel" name="username" id="fname" value="John" v-model="message"/><br>
            输入的值是：{{ message }}
        </div>

        <script type="text/javascript">
            let app = new Vue({
                el:'#app',
                data:{
                    message:'Hello'
                }
            })
        </script>
    </body>
</html>

程序解释：

div标签中的内容：相当于是==视图层View==；展示给用户的输入框，User Input；我们将来就是要将它和数据层Model里的数据进行双向绑定；

script标签中的内容：new Vue()，应该理解为定义了一个Vue的实例，即ViewModel层；el:’#app’，element，意思是和前面使用id=’app’的元素进行了关联；data:{}定义了数据层即Model层，用于和使用UI控件的视图层view进行双向绑定；

程序中的双向绑定是通过v-model=”message”这个核心代码来实现的；

代码中的value=“John”这个默认初始值被覆盖了。具体原因，Vue官网上有说明：

https://vuejs.org/v2/guide/forms.html#Text

v-model will ignore the initial value, checked, or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the data option of your component.

2 多行文本框双向绑定
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>多行文本框双向绑定</title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="textarea">
         <span>Multiline message is:</span>
         <p style="white-space: pre-line;">{{message}}</p>
         <br>
         <textarea placeholder="add multiple lines" v-model="message"></textarea>
         </div>

         <script type="text/javascript">
            let app= new Vue({
                el:'#textarea',
                data:{
                    message:'多行文本框双向数据绑定'
                }
            })
         </script>
    </body>
</html>
3 单个复选框的双向绑定
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>6双向数据绑定-单个复选框CheckBox</title>
        <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>

        <div id="checkbox"> 
            <input type="checkbox" id="checkbox" v-model="checked"/>
            <label for="checkbox">{{ checked }}</label>
        </div>

        <script type="text/javascript">
            let app = new Vue({
                el:'#checkbox',
                data:{
                    checked:'true',
                }
            })
        </script>
    </body>
</html>

注意：

不要把{{ checked }} 其中绑定的{{checked}}给遗漏了。

另外，该行代码写在的下面，也是有原因的。运行代码之后，才能看到效果；

问题，怎么可以做到像官网那样的选择效果呢？

Post Views: 1,006

留言