一、title 定义 :
规定元素的额外信息
二、网页效果
三、v-bind:title 定义
1. 将这个元素节点的 title
特性和 Vue 实例的 message
属性保持一致
<html>部分
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
</html>部分
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> js部分
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
</script>
解释:v-bind:title 指令把所在的<span>元素的 title 的值和 message这个属性值绑定在一起了。
网页效果:title 显示的值就是message的属性值
2. 响应式
a. 打开浏览器的 JavaScript 控制台,修改message的属性值,网页的html 也会随之变化
b. 在控制台输入 app2.message = '新消息'
,就会再一次看到这个绑定了 title
特性的 HTML 已经进行了更新。