CODEWITHSUNDEEP
javascripthtmlvue.js
user5477154
user5477154

Reputation:

VueJS: what does an html attribute prefixed with a colon signify?

Example:

<vue-select 
  class="vue-select1" 
  name="select1"
  :options="options1" 
  :model.sync="result1"
></vue-select>

What is the meaning the colon in front of :options and :model.sync here? I've searched all over the internet and can't find an answer anywhere.

Example seen here: https://github.com/Haixing-Hu/vue-select

Upvotes: 36

Views: 12829

Answers (3)

Nathan Wailes
Nathan Wailes

Reputation: 12222

To add to thanksd's answer:

Those are dynamic attributes. Basically it means that Vue.js will let you set the value of those attributes to variables, and when the value of those variables updates, the value of those attributes will update as well.

Upvotes: 13

thanksd
thanksd

Reputation: 55634

In a Vue template, a colon : prefixing an html attribute is shorthand for v-bind.

Here's the full documentation for v-bind.

Upvotes: 38

demogorgon
demogorgon

Reputation: 484

Be careful when using the colon in HTMLbecause selecting the attribute in CSS and JQueryhas a different meaning with a colon. In CSS and JQuery, a colon signifies a pseudo-selector, which is different from v-bind;

Upvotes: 1

Related Questions