Vue

by Richard Ayotte

HTML

<div id="app">
    <div v-for="task in tasks">
        <input :id="task.id" type="checkbox" v-model="tasks">
        <label :for="task.id">{{ task.title }} {{task.completed}}</label>
    </div>
</div>

CSS

body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
}

#app {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    transition: all 0.2s;
}

li {
    margin: 8px 0;
}

h2 {
    font-weight: bold;
    margin-bottom: 15px;
}

del {
    color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
	el: "#app"
	, data: {
		tasks: [{
			id: 1
			, title: 'Finish photos from France'
			, completed: false
			, editing: false
		}, {
			id: 2
			, title: 'Edit wedding photos'
			, completed: false
			, editing: false
		}]
	}
})