vuetify, v-card-subtitle :title ... 这是做什么的？答案

【问题标题】：vuetify, v-card-subtitle :title ... what does this do?vuetify, v-card-subtitle :title ... 这是做什么的？
【发布时间】：2023-02-16 05:23:00
【问题描述】：

我正在研究一个使用大量 Vuetify 和 v-card 组件的项目。一个这样的组件是<v-card-subtitle>，它是这样使用的——

<v-card-subtitle :title="display.content">
  Hello World
</v-card-subtitle>

当我将鼠标悬停在 v-card-subtitle 上时，:title 会显示一个小弹出窗口，我想设置此弹出窗口的样式，但它看起来像是固有的 Vuetify 属性，也许吧？

:title 是什么，它是如何工作的？有人熟悉这个吗？我在文档中找不到这个。

我想专门为 :title 设置样式，而不是 v-card-subtitle。我尝试了以下方法-

将标题包装在span 和div 中
添加附加类或子类

但是，没有这样的运气。

【问题讨论】：

Vuetify 版本是什么？
考虑创建一个可运行minimal reproducible example。另外，指定清楚地你想达到什么目的。“我想要造型:title”是不切实际的要求，因为:title 是组件的属性，因此无法设置样式。您可能想要设置组件创建的 DOM 元素的样式（将 :title 属性的值作为内容）。请更具体地说明您的要求，以免被误解或误解。
:title 未记录在 <v-card-subtitle> 上。根据文档，您甚至不应该期望它会起作用。
@tao 谢谢你的回复，这确实回答了我的很多问题。现在我知道 :title 不是 <v-card-subtitle> 的记录属性。我的下一个问题是，将鼠标悬停在 v-card 组件上时创建弹出框的最佳方法是什么？谢谢！
@vernou Vuetify 版本 1.12.3

标签： vue.js vuetify.js

【解决方案1】：

哦，这只是 Vue 绑定到变量的常规 HTML title attribute。 Vue 可以使用 v-bind 或简写的 : 语法将变量绑定到任何 HTML 属性，而不仅仅是组件属性。

请注意，如果一个属性没有被组件绑定，它会被下推到组件的根元素。 Vue 称之为Fallthough Attributes。

所以你的v-card-subtitle 呈现了一个带有 HTML title 属性的 div，设置为 display.content 中的值。是的，原生标题无法设置样式。

【讨论】：