了解未记录的 Vue.js 属性(Vue + Pug )

Question

所以我只是在这里浏览某些vue.js代码。 并遇到了下面的代码：

menu-dropdown.task-dropdown(
  v-if="!isRunningYesterdailies",
  :right="task.type === 'reward'",
  ref="taskDropdown",
  v-b-tooltip.hover.top="$t('options')"
)

我不太明白代码中插入的此属性:right？它在做什么，它的目的是什么，我是 Vue 的新手.js ，但是通过环顾四周，我能够找到除这个称为 :right 的属性之外的其余属性的文档？谁能对此有所了解？

Answer 1

html 属性前面的:是 v-bind 指令的简写。 V-bind 允许您做的是将变量值设置为指定的 HTML 属性。例如：v-bind:alt="kittenPhotoDescription"和做alt:"kittenPhotoDescription"一样。

这是在文档中找到它的位置。

Answer 2

我不太了解 Pug，但在我看来，粘贴的 Pug 代码创建了一个具有这些给定属性的 menu-dropdown 元素。 right属性使用 v-bind: 指令的速记:绑定到 Vue 模型中的动态值。

我在您链接的存储库中搜索menu-dropdown组件的定义，并找到此文件：https://github.com/HabitRPG/habitica/blob/develop/website/client/components/ui/customMenuDropdown.vue

这就是 right 属性被定义为 Vue 属性的地方：

<script>
export default {
  props: {
    right: Boolean,
    ...

你可以在 Vue 文档中阅读更多关于道具的信息。