console
var data = {
items: [{
text: 'banana',
checked:true
},{
text: 'apple',
checked:false
}],
title: 'My shopping list'
}
new Vue({
el: '#app',
data
})
<div id="app" class="container">
<h2>
{{title}}
</h2>
<ul>
<li v-for="item of items" :class="{'removed': item.checked}">
<div class="checkbox">
<label>
<input type="checkbox" v-model="item.checked"/>
{{item.text}}
</label>
</div>
</li>
</ul>
<div class="footer">
<hr />
<em>
Change the title of your shopping list here
</em>
<input type="text" v-model="title" />
</div>
</div>
.container {
width: 40%;
margin: 20px auto 0 auto;
}
.removed {
color: grey;
}
.removed label {
text-decoration: line-through;
}
ul li {
list-style-type: none;
}