SOURCE

var ls = window.localStorage;
  var lsLists = new Array();
  if (ls.getItem("lists") != null) {
    //从localStorage取出JSON字符串，并转为对象
    lsLists = JSON.parse(ls.getItem("lists"));
  }

  var vm = new Vue({
    el: '#app',
    data: {
      lists:lsLists,
      todo:{
        content:'',
        finished:false,
        deleted:false
      }
    },
    methods:{
      //添加
      addTodo(){
        this.lists.unshift(this.todo);
        //根据完成状况排序
        this.lists.sort(sortF);
        //将对象转为JSON字符串
        ls.setItem("lists",JSON.stringify(this.lists));
        this.todo = {
          content : '',
          finished:false,
          deleted:false
        };
      },
      //改变状态
      changeStatus(i){
        let thisStatus = this.lists[i].finished;
        //状态翻转
        this.lists[i].finished = !thisStatus;
        //根据完成状况排序
        this.lists.sort(sortF);
        //将对象转为JSON字符串
        ls.setItem("lists",JSON.stringify(this.lists));

      },
      //删除
      delItem(i){
        //删除当前index=i的一条
        this.lists.splice(i,1);
        //将对象转为JSON字符串
        ls.setItem("lists",JSON.stringify(this.lists));
      }
    }
  });
  function sortF(a,b){  
    console.log(a.finished,b.finished)
       return a.finished-b.finished;
    }

<div id="app">
  <div>
    <input type="text" class="addInput" placeholder="请输入待办事项" v-model="todo.content" @keydown.enter="addTodo">
  </div>
  <div class="unit" v-for="(item,index) in lists">
    <input type="checkbox" class="cb" :checked="item.finished" @click="changeStatus(index)">
    <span :class="{'finish':item.finished,'no':true}">{{index+1}}</span>
    <span :class="{'finish':item.finished,'con':true}">{{item.content}}</span>
    <button type="button" class="delBtn" @click="delItem(index)">×</button>
  </div>
  <div class="empty" v-if="lists.length === 0">
    暂无内容！
  </div>
</div>	

html{
	width: 350px;
}
.addInput{
	display: block;
	width: 330px;
    height: 25px;
    border: 1px #ddd solid;
    border-radius: 5px;
    padding: 2px;
    margin: 20px 0;
    box-sizing: border-box;
    box-shadow: 0 0 5px #ddd;
}
.unit{
	position:relative;
    border-bottom: 1px #ddd solid;
    padding-bottom: 3px;
    margin: 3px 0;
}
.finish{
	text-decoration: line-through;
	color:#9e9e9e;
}
.delBtn{
	position: absolute;
    right: 0;
    border: 0;
    color: #fbf0f0;
    background-color: #F44336;
    border-radius: 5px;
    width:15%;
}
.cb,.no{
	width:10%;
  background: #ddd;
  border: solid #ddd;
  border-width: 1px 5px 1px 5px;
  border-radius: 50%;
}
.con{
	word-wrap:break-word;
    word-break: break-all;
	width: 65%;
}
.empty{
	font-size: 15px;
    color: #ccc;
    text-align: center;
    padding: 10px 0;
}