What does it mean when the html attribute is prefixed with a colon?

Example:

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

      

What is the meaning of the colon before :options

and :model.sync

here? I have searched all over the internet and cannot find the answer anywhere.

An example is here: https://github.com/Haixing-Hu/vue-select

+3


source to share


3 answers


In a Vue template, a colon :

prefixed to an html attribute is an abbreviationv-bind

.



Here's the complete documentation for v-bind

.

+3


source


To add to the grateful answer :



These are dynamic attributes . This basically means that Vue.js will allow you to set the value of these attributes for variables, and when the value of those variables is updated, the value of those attributes will update as well.

+1


source


Be careful when using a colon in HTML

, because the selection of an attribute in CSS

and JQuery

has a different meaning with a colon. B CSS

and a JQuery

colon stands for a pseudo-selector

, which is different from v-bind

;

0


source







All Articles