冒号在 VueJS/Vuetify/HTML 组件标签中代表什么 [英] What does the colon represent inside a VueJS/Vuetify/HTML component tag

问题描述

我正在使用 Vuetify，所以这可能是 VueJS、Vuetify 甚至 HTML 问题，但我的组件如下所示:

I am using Vuetify, so this could be either a VueJS, Vuetify or even HTML question, but my component looks like this :

<v-list-tile 
  v-for="item in menuItem.items" 
  :key="item.type" 
  :style="`background: ${item.colour}`" 
  :html="item.type">
</v-list-tile>

以:key为例，key前面的冒号(:)是什么意思?在哪里可以找到我可以使用的值?

Take the :key for example, what does the colon (:) before the word key mean? And where can I find what values I can use ?

推荐答案

:key 是 v-bind:key:

v- 前缀用作识别特定于 Vue 的视觉提示模板中的属性.这在您使用 Vue.js 时很有用将动态行为应用于某些现有标记，但可以感觉到一些常用指令的详细说明.同时，该当您构建一个 v- 前缀时，对 v- 前缀的需求变得不那么重要SPA，其中 Vue.js 管理每个模板.因此，Vue.js 提供两个最常用的指令 v-bind 的特殊简写和 v-on

The v- prefix serves as a visual cue for identifying Vue-specific attributes in your templates. This is useful when you are using Vue.js to apply dynamic behavior to some existing markup, but can feel verbose for some frequently used directives. At the same time, the need for the v- prefix becomes less important when you are building a SPA where Vue.js manages every template. Therefore, Vue.js provides special shorthands for two of the most often used directives, v-bind and v-on

https://v1.vuejs.org/guide/syntax.html#v-bind-简写

这篇关于冒号在 VueJS/Vuetify/HTML 组件标签中代表什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！