What does the colon represent inside a VueJS/Vuetify/HTML component tag

Question

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>

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

Possible duplicate of What does it mean when an html attribute is prefixed with a colon? — thanksd
– thanksd, Commented Jul 26, 2018 at 15:16
@thanksd how did i not find this, i was looking for a while, thanks — thatOneGuy
– thatOneGuy, Commented Jul 26, 2018 at 15:32

FredG · Accepted Answer · 2018-07-26 15:07:18Z

38

:key is a shorthand for v-bind:key:

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-Shorthand

edited Jul 26, 2018 at 15:07

FredG

2762 silver badges10 bronze badges

answered Jul 26, 2018 at 14:58

dziraf

3,6531 gold badge20 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

thatOneGuy Over a year ago

i did actually look on that page. Must have glanced over it. Makes sense, thanks

Collectives™ on Stack Overflow

What does the colon represent inside a VueJS/Vuetify/HTML component tag

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related