码迷,mamicode.com
首页 > 其他好文 > 详细

2-4 Vue中的属性绑定和双向数据绑定

时间:2018-06-13 15:23:27      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:new   title   vue   meta   lang   har   str   col   body   

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性绑定和双向数据绑定</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root"></div>

    <script type="text/javascript">
        new Vue({
            el: "#root"



        })


    </script>
    </body>
    </html>

只是引入了Vuejs的库,然后创建了一个div标签作为一个挂载点,然后让Vue实例挂载到我们的这个挂载点之下。接下来写模板的内容。title是一个HTML的一个属性。希望这个提示语title可变,不是写死的。我们可以在实例的data里面去定义一个title,让它等于this is hello world。这个时候title里显示的内容是数据里的title就可以了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性绑定和双向数据绑定</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <div title="this is hello world">hello world</div>
    </div>

    <script type="text/javascript">
        new Vue({
            el: "#root"



        })


    </script>
    </body>
    </html>

这样写可以吗?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性绑定和双向数据绑定</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <div title="title">hello world</div>
    </div>

    <script type="text/javascript">
        new Vue({
            el: "#root",
            data:{
               title:"this is hello world"

            }



        })


    </script>
    </body>
    </html>

现在只是显示字符串的title,并不是下面data里面数据项里的title。如果在Vue之中我们希望做属性的绑定,这个title属性绑定的是数据里面的title,那怎么做好属性的绑定呢?那就需要在前面使用一个新的模板指令:

v-bind:

它的意思是

2-4 Vue中的属性绑定和双向数据绑定

标签:new   title   vue   meta   lang   har   str   col   body   

原文地址:https://www.cnblogs.com/ZHONGZHENHUA/p/9177133.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!