3. Conditional

Table of Content

• Introduction
• Directive V-If
• Negasi V-If
• Directive V-Else

tech

Introduction

Conditional dikenal dengan ‘jika-maka’. Pengandaian dalam javascript merupakan suatu perintah yg digunakan untuk memilih satu aksi dari beberapa kemungkinan dengan syarat tertentu.

Directive V-If

Directive ini secara default bernilai true untuk menampilkan data dan false untuk menyembunyikan data.

app.js

let app = new Vue({
el: '#app',
data: {
	tampil: true,
	pesan: '<b>Menggunakan directive v-html</b>',
}
})

index.html

<div id="app">
	<p v-html="pesan" v-if="tampil"></p>
</div>

Note : v-if juga dapat disisipkan nilai seperti berikut v-if="tampil == 'ada' "

Negasi V-If

jika v-if ditampilkan jika bernilai true, maka negasi adalah kebalikannya. Negasi dijalankan ketika v-if bernilai false

app.js

let app = new Vue({
el: '#app',
data: {
	tampil: false,
	pesan: '<b>Menggunakan directive v-html</b>',
}
})

index.html

<div id="app">
	<p v-html="pesan" v-if="!tampil"></p>
</div>

Directive V-Else

Jika membicarakan conditional if tidak lengkap tanpa else. Pada intinya else akan dijalankan bila if tidak terpenuhi atau tidak sesuai.

app.js

let app = new Vue({
el: '#app',
data: {
	tampil: false,
	pesan1: '<b>V-If dijalankan!</b>',
	pesan2: '<b>V-Else dijalankan!</b>',
}
})

index.html

<div id="app">
    <p v-html="pesan1" v-if="tampil"></p>
    <p v-html="pesan2" v-else="tampil"></p>
</div>