SOURCE

console 命令行工具 X clear

                    
>
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;
}