npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev

<template>
 <div id="app">
  <input/>
  <ul>
   <li v-for="item in items">
    {{item.label}}
   </li>
  </ul>
 </div>
</template>

<script>
 export default {
  data () {
   return {
    items: [
     {
      label: 'read books',
      isFinished: false
     },
     {
      label: 'eat dinner',
      isFinished: true
     }
    ]
   }
  }
 }
</script>

<template>
 <div id="app">
  <input/>
  <ul>
   <li v-for="item in items" v-bind:class={finished:item.isFinished}>
    {{item.label}}
   </li>
  </ul>
 </div>
</template>

<script>
 export default {
  data () {
   return {
    items: [
     {
      label: 'read books',
      isFinished: false
     },
     {
      label: 'eat dinner',
      isFinished: true
     }
    ]
   }
  }
 }
</script>

<style>
 .finished {
  text-decoration: line-through;
 }
</style>

<template>
 <div id="app">
  <input v-on:keyup.enter="addNewItem" v-model="newItem"/>
  <ul>
   <li v-for="item in items" v-bind:class={finished:item.isFinished}>
    {{item.label}}
   </li>
  </ul>
 </div>
</template>

<script>
 export default {
  data () {
   return {
    items: [
     {
      label: 'read books',
      isFinished: false
     },
     {
      label: 'eat dinner',
      isFinished: true
     }
    ],
    newItem: ''
   }
  },
  methods: {
   addNewItem () {
    this.items.push({label: this.newItem,isFinished: false})
    this.newItem = ''  //清空输入框
   } 
  }
 }
</script>

<style>
 .finished {
  text-decoration: line-through;
 }
</style>

//添加代码
 <li v-for="item in items" v-bind:class={finished:item.isFinished} v-on:click="finish(item)">
    {{item.label}}
 </li>

methods: {
 finish (item) {
    item.isFinished = !item.isFinished
  }
}

sudo add-apt-repository ppa:maarten-baert/simplescreenrecorder
sudo apt-get update
sudo apt-get install simplescreenrecorder