vue学习笔记-实现todolist（6）

vue学习笔记之todolist

<template>
  <div id="app">
    <input type="text" v-model="todo">
    <button @click="add">+增加</button>
    <hr>
    <h2>进行中</h2>
    <ul>
    	<li v-for="(item,index) in list" :key="index" v-if="!item.checked">
        <input type="checkbox" v-model="item.checked" @change="saveList">--{{item.title}}------ <button @click="removeData(index)">删除</button>
      </li>
    </ul>
    <h2>已完成</h2>
    <ul>
    	<li v-for="(item,index) in list" :key="index" v-if="item.checked">
        <input type="checkbox" v-model="item.checked" @change="saveList">--{{item.title}}------ <button @click="removeData(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return{
      todo:'',
      list:[]
    }
  },
  methods:{
    add(){
      //1.获取input输入的值;
      //2.把输入的值push到list里面
      this.list.push({
        title:this.todo,
        checked: false
      });
      //3.增加后清空输入框的值
      this.todo='';
      localStorage.setItem('list',JSON.stringify(this.list))
    },
    removeData(index){
      this.list.splice(index,1);
      localStorage.setItem('list',JSON.stringify(this.list))
    },
    saveList(){
      localStorage.setItem('list',JSON.stringify(this.list))
    }
  },
  mounted(){ //生命周期函数 vue页面刷新就会触发的方法
    var list=JSON.parse(localStorage.getItem('list'))
    if(list){
      this.list=list;
    }
  }
}
</script>

<style lang="scss">

</style>

运行效果如下：