JSFiddle - React, Tailwind, and code Playground

by Maiki Nahara

HTML

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo" v-cloak>
    <h1>{{title | uppercase}}</h1>
    <p v-if="!todos.length">No todos at this moment.</p>
    <ul>
        <li v-for="todo in todos"
            :class="{ done: todo.done }"
            @click="todo.done = !todo.done">
            {{ todo.content }}
        </li>
    </ul>
    <component1></component1>
</div>

CSS

body {
    font-family: Helvetica Neue, Arial, sans-serif;
}
li.done {
    text-decoration: line-through;
}
[v-cloak] {
    display: none;
}

JavaScript

Vue.component('component1', {
  template: '<ul><component2 :blue="true"></component2></ul>'
})

Vue.component('component2', {
  props: ['blue'],
  template: `<div>
    <div style="background: blue" v-if='blue'>blue</div> 
    <div style="background: red" v-else>red</div>
  </div>`
})

var demo = new Vue({
    el: '#demo',
    data: {
        title: 'todos',
        todos: [], //testing with data use: [{done:false,content:'testing'}]
        blue: false
    }
})