<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> </div>
var demo = new Vue({ el: '#demo', data: { title: 'todos', todos: [] //testing with data use: [{done:false,content:'testing'}] } })
body { font-family: Helvetica Neue, Arial, sans-serif; } li.done { text-decoration: line-through; } [v-cloak] { display: none; }