Why to add a : infront of a Vue component attribute?

Question

I'm new to Vue and asking myself why I often see a : infront of a Vue component attribute?

I use Ionic with with and for example in the starter template I have the following:

<template>
  <ion-page>
    <ion-header :translucent="true">
    ...
  </ion-page>
</template>

Why here is a :? The result will be the same if i remove the :

The result will be the same if i remove the : Try to access the viewmodel properties without : or write some javascript expression to see the difference. — Mat J
– Mat J, Commented Dec 28, 2020 at 10:31

tony19 · Accepted Answer · 2022-07-15 04:48:06Z

2

: is the shorthand for v-bind: which is binding the javascript variable to the attribute. https://v2.vuejs.org/v2/guide/class-and-style.html

So regarding :translucent="true", boolean value true will be assigned to the translucent attribute. If : is not added (translucent="true"), string "true" will be assigned to translucent attribute, which will also work because any non-empty string will be converted to the true boolean variable internally.

So logically : is needed to assign the boolean value.

edited Jul 15, 2022 at 4:48

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 28, 2020 at 9:33

topdev87

8,7913 gold badges11 silver badges33 bronze badges

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

Collectives™ on Stack Overflow

Why to add a : infront of a Vue component attribute?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related