v-bind

最新推荐文章于 2023-11-07 10:33:40 发布

高手坟墓丶

最新推荐文章于 2023-11-07 10:33:40 发布

阅读量331

点赞数

分类专栏：从零开始学vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_31070475/article/details/78475257

版权

从零开始学vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

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

</body>
</html>

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

高手坟墓丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-bind

<html><head> <title></title> <script src="https://unpkg.com/vue"></script></head><body> <div id="app"> <span v-bind:title="msg"> 鼠标悬停几秒查看此处动态绑定的提示信息！ </span>
复制链接

扫一扫

专栏目录

v-bind

“相关推荐”对你有帮助么？