您现在的位置：首页 >> 前端 >> 内容

v-bind属性作用及代码实例

时间：2017/11/8 14:36:06 点击：

　　核心提示：v-bind属性被称为指令。指令带有v-前缀，表示它们是Vue提供的特殊属性，会在渲染的DOM上应用特殊的响应式行为。htmlheadtitle/titlescript src=https://unp...

v-bind属性被称为指令。指令带有v-前缀，表示它们是Vue提供的特殊属性，会在渲染的DOM上应用特殊的响应式行为。

<html>
<head>
    <title></title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <p id="app">
        <span v-bind:title="msg">
            鼠标悬停几秒查看此处动态绑定的提示信息！
        </span>
    </p>
    <script type="text/javascript">
        var app = new Vue({
        el: '#app',
        data: {
             msg: '页面加载于' + new Date().toLocaleString() //此处不能加";"
            }
        })
    </script>

</body>
</html>

鼠标悬停后可以看到时间。

打开浏览器控制台输入app.msg = 'hello'，鼠标悬停后可以看到绑定了title属性的HTML已经进行了更新。