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

user_437242 0
Viewed 51

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 :

ionic-framework vue.js
1 Answers

: 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.

user_144776070
Related