JSFiddle - React, Tailwind, and code Playground

by Federico

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
    <p v-if="itemsInStock > 10">{{ itemsInStock }} items in stock.</p>
    <p v-else-if="itemsInStock > 0">Hurry up, there are just few items in stock.</p>
    <p v-else>We are all out of items!</p>
    
    <template v-if="itemsInStock > 50">
        <p>Special offer!</p>
        <p>We have tons of items in tock, save 20% if you order now...</p>
    </template>
    <hr>
    <p v-show="isNinja">Invisible like a ninja!</p>
    <p v-show="!isNinja">Here I am!</p>
    <button v-on:click="isNinja=!isNinja">Ninja skills</button>
    <p>Ninja mode is {{ isNinja ? 'on' : 'off' }}!</p>
</div>
<div id="app1">
    <hr>
    <h1>v-cloack example</h1>
    <p v-cloak>{{ message }}</p>
</div>

CSS

[v-cloak] {
    display: none;
}

JavaScript

new Vue({
    el: '#app',
    data: {
        itemsInStock: 51,
        isNinja: true,
        message: 'Hello world'
    },
    methods: {
        
    }
});

setTimeout(function() {
    new Vue({
        el: '#app1',
        data: {
            message: 'Hello world'
        },
        methods: {

        }
    });
}, 5000);