If Statements

Now that you have your Vue Instance and component setup, you are now ready to start working with Vue!

One very important aspect of Vue is that it adds logic statements, this means that you are able to use If, Else If, and Else statements in your html.

Html

<div id="vueApp">
    <div v-if="show">
        <!-- This will load on the dom because show is set to true -->
        <!-- If show was false nothing inside this div including the div itself would be rendered -->
        <!-- You can also use v-show which will still render the html but wont show it, it works like 'display: none;' -->
    </div>
</div>

JavaScript

let app = new Vue({
    el: '#vueApp',
    data() {
        return {
            show: true
        }
    }
});

Last modified: 24 November 2023