4.vue.js属性的绑定与双向数据绑定

属性的绑定

 

<body>

    <div id="root" >

        <!--属性的绑定:属性”“中可写js,例如字符串拼接‘he’+ 'elo' -->

        <!--<divv-bind:title="title">hello</div>-->

        <!-- 属性绑定的简写 -->

        <div :title="title">hello</div>

    </div>

 

    <script>

       new Vue({

           el: "#root",

           data: {

                title: "thisis title"

            }

        })

    </script>

</body>

双向数据绑定

<body>

    <div id="root" >

        <!-- 双向数据绑定:输入框内改变value值,div中内容也跟之改变 -->

        <input v-model="title"/>

        <div>{{title}}</div>

    </div>

 

    <script>

       new Vue({

           el: "#root",

           data: {

                title: "thisis title"

            }

        })

    </script>

猜你喜欢

转载自blog.csdn.net/weixin_38898423/article/details/80685870