Scribd Logo
Upload

Welcome to Scribd!

  • 4.if Else Vue Conditional Rendering

    Uploaded by

    ramadhan barlian82
    3 views4 pages
    The document discusses conditional rendering in Vue using v-show, v-if, v-else, and v-else-if. It provides an example of using v-show to conditionally display a div showing text saying "Lampu menyala" (the light is on) based on the stateLampu data property, and includes a button to toggle the stateLampu property and thus show/hide the div.

    Original Description:

    Original Title

    4.If Else Vue Conditional Rendering

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses conditional rendering in Vue using v-show, v-if, v-else, and v-else-if. It provides an example of using v-show to conditionally display a div showing text saying "Lampu menyala" (the light is on) based on the stateLampu data property, and includes a button to toggle the stateLampu property and thus show/hide the div.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    3 views4 pages

    4.if Else Vue Conditional Rendering

    Uploaded by

    ramadhan barlian82
    The document discusses conditional rendering in Vue using v-show, v-if, v-else, and v-else-if. It provides an example of using v-show to conditionally display a div showing text saying "Lampu menyala" (the light is on) based on the stateLampu data property, and includes a button to toggle the stateLampu property and thus show/hide the div.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    1.

    If Else Vue Conditional Rendering | V-If V-Else V-Else-If V-Show


    2. V-SHOW
    SOURCE CODE :

    <!DOCTYPE html>

    <html>

    <head>

    <title>Index</title>

    </head>

    <body>
    <div id="app">

    <div v-show="stateLampu">

    Lampu menyala

    </div>

    <button @click="toggleLampu">Saklar Lampu</button>

    </div>

    <script type="module">

    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({

    data() {

    return {

    stateLampu: false

    },

    methods: {

    toggleLampu() {

    this.stateLampu = !this.stateLampu

    }).mount('#app')

    </script>

    </body>

    </html>

    You might also like