Vue har directives til conditionals / kontrolstrukturer
<!--html-->
<div v-if="true">
<p>{{ title }} - by {{ author }}</p>
<p>Book in series: {{ book_number }}</p>
</div>Her er et eksempel på en menu, der kan vises eller skjules med conditionals.
<!--html-->
<div id="app">
<button @click="showHideMenu">
<span v-if="showMenu == false">Show menu</span>
<span v-if="showMenu">Hide menu</span>
</button>
<div v-if="showMenu">
<ul>
<li>Front page</li>
<li>About us</li>
<li>Contact</li>
</ul>
</div>
</div>I Vue oprettes showMenu som boolean og metoden showHideMenu oprettes til at ændre på showMenu.
// app.js
const app = Vue.createApp({
data() {
return {
showMenu: false
}
},
methods: {
showHideMenu() {
this.showMenu = !this.showMenu;
}
}
})
app.mount('#app')Alternativer kan være
<!--html-->
<button @click="showHideMenu">
<span v-if="!showMenu">Show menu</span>
<span v-if="showMenu">Hide menu</span>
</button>
<!--else conditional-->
<button @click="showHideMenu">
<span v-if="!showMenu">Show menu</span>
<span v-else">Hide menu</span>
</button>I følgende eksempel kan man se, hvordan man kan bruge Vues conditional, show. Forskellen på v-if og v-show er, at med v-if bliver et element fjernet fra DOM’en, hvis det ikke vises og med v-show bliver elementet skjult med CSS – display:none;. v-show tager også en boolean som argument.
<!--html-->
<button @click="showHideMenu">
<span v-show="showMenu">Hide menu</span>
</button>v-for
v-for directive kan sammenlignes med et for-loop i traditionelle GP-programmeringssprog. I eksemplet nedenfor indeholder data et array af objekter
// app.js
const app = Vue.createApp({
data() {
return {
albums: [
{ title: 'Wish you were here', artist: 'Pink Floyd' },
{ title: 'Black Clouds and Silber Linings', artist: 'Dream Theater' },
{ title: 'Alter Echo', artist: 'Dizz Mizz Lizzy' },
]
}
},
methods: {
}
})
app.mount('#app')Her ses, hvordan de kan udskrives med v-for
<!--html-->
<div id="app">
<ul>
<li v-for="item in albums">{{ item.artist }} - {{ item.title }}</li>
</ul>
</div>- Introduktion til VueJS
- Vue – Events
- Vue – Methods
- Vue – Directives
- Vue – Attribute binding
- Vue – Computed properties
- Vue – refs
Læs mere om Vue
