v-bind:title 绑定元素的title与实例属性一致

一、title 定义 :

规定元素的额外信息

v-bind:title 绑定元素的title与实例属性一致_第1张图片

二、网页效果

v-bind:title 绑定元素的title与实例属性一致_第2张图片

三、v-bind:title 定义

1. 将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致

部分


  v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息!
 

部分
js部分

解释:v-bind:title 指令把所在的元素的 title 的值和 message这个属性值绑定在一起了。

网页效果:title 显示的值就是message的属性值 

v-bind:title 绑定元素的title与实例属性一致_第3张图片

2. 响应式

a. 打开浏览器的 JavaScript 控制台,修改message的属性值,网页的html 也会随之变化

v-bind:title 绑定元素的title与实例属性一致_第4张图片

b. 在控制台输入 app2.message = '新消息',就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新。

v-bind:title 绑定元素的title与实例属性一致_第5张图片

你可能感兴趣的:(vue)