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

一、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 已经进行了更新。

猜你喜欢

转载自blog.csdn.net/weixin_41796631/article/details/82794706