Directives i Vue.js: Brug og eksempler

Directives i Vue.js giver dig mulighed for at anvende speciel adfærd på elementer i DOM. De er præfikset med v- syntaksen og bruges til at manipulere DOM, håndtere hændelser, betinget gengivelse af elementer og mere. Vue.js har flere indbyggede directives såsom, og, som dækker en lang række almindelige brugssager. v-if v-for v-bind v-on

Her er nogle almindelige directives i Vue.js:

 

1. Direktiv: Dette direktiv bruges til at betinget gengive et element baseret på en betingelse. v-if

Eksempel:

<div v-if="isShow">This element is only displayed if isShow is true.</div>

 

2. Direktiv: Dette direktiv bruges til at iterere over et array eller et objekt og skabe tilsvarende elementer. v-for

Eksempel:

<ul>  
  <li v-for="item in items">{{ item }}</li>  
</ul>

 

3. Direktiv: Dette direktiv bruges til at binde værdien af ​​et udtryk til en attribut eller en egenskab ved et element. v-bind

Eksempel:

<img v-bind:src="imageUrl">

 

4. Direktiv: Dette direktiv bruges til at lytte til og håndtere begivenheder på et element. v-on

Eksempel:

 <button v-on:click="handleClick">Click me!</button>

 

5. Direktiv: Dette direktiv skaber en tovejsbinding mellem et inputelement og en dataegenskab. v-model

Eksempel:

<input v-model="message">

 

Disse er blot nogle grundlæggende directives i Vue.js. Du kan også oprette din egen brugerdefinerede directives til at udføre specifik adfærd i din Vue.js-applikation.