Kondisonal Vue JS

Tetap semangat untuk belajar, semoga bangka belitung dapat berkembang  dengan IT (Teknologi Informasi) oleh putra putri daerah sendiri. kita akan membahas kondisional dengan menggunakan vue js.  codingannya sama dengan bahasa pemograman lainnya yaitu IF – Else.

misalkan ada sebuah inputan jika user memasukkan TRPL maka output yang ditampilkan yaitu: Wecome To TRPL, jika tidak ada inputan maka output tidak menampilkan apapun dan jika ada inputan namun bukan inputan TRPL maka output yang dihasilkan Bukan Di Prodi TRPL.

misal kita menggunkan SPAN

<input type=”text” v-model:value=”pesan”>
<span v-if=”pesan===””> </span>
<span v-else-if=”pesan===’TRPL'”>Welcome To TRPL</span>
<span v-else>Bukan Di Prodi TRPL</span>

adapun full code sebagai berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Latihan Vue Binding </title>

    <!-- Vuejs CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

    <div id="coba">
        <input type="text" v-model:value="pesan">
        <span v-if="pesan===''">  </span>
    <span v-else-if="pesan==='TRPL'">Welcome To TRPL</span>
    <span v-else>Bukan Di Prodi TRPL</span>
    </div>
    
    <script>
        var app = new Vue({
            el: "#coba",
            data: {
                pesan: ""
            }
        })
    </script>
</body>
</html>

Adapun Hasilnya:

Jika menginput TRPL

Jika menginput Selain TRPL