vue 简单案例 todolist

<template>
  <div id="app">
  <div class="title">
    <span class="text">TODOList</span>
    <input placeholder="请输入..." type="text" class="txtbox" @keydown="addList">
  </div>

  <div>
    <p class="notdo">未录入名单</p>
    <ul>
        <li  v-if="!res.ckof"  v-for="(res,index) in list":key="index">
        <input type="checkbox" @click="checkof(index)":checked="res.ckof" > {{res.name}}-----<button @click="cancel(index)">x</button>
      </li>
    </ul>
    
    <p class="cando">已录入名单</p>
    <ul>
       <li v-if="res.ckof" v-for="(res,index) in list":key="index">
       <input type="checkbox" @click="checkof(index)":checked="res.ckof">{{res.name}};-----<button @click="cancel(index)">x</button>
       </li>
    </ul>
  </div>
  
    
  </div>
</template>

<script>
import storage from "./storage.js";
export default {
  name: 'App',
  data(){
    return {
      list:[
        {
          name:"张三",
          ckof:false,
        },
        
        {
          name:"李四",
          ckof:true,
        }
      ]
    }
  },
  mounted(){//组件挂载完成 生命周期钩子函数
  this.list=storage.getStorage("list");
  },
  methods:{
    
    //添加新栏目的方法
    addList(e){
      if(e.keyCode==13){
          let a=e.target.value;
          if(a!=""){
            this.list.push({
              name:a,
              ckof:false,
              });
             a="";
             storage.setStorage("list",JSON.stringify(this.list));
             
          }
      }
    },
    checkof(index){
      //console.log(this)=>VueComponent;
       this.list[index].ckof=!this.list[index].ckof;
       storage.setStorage("list",JSON.stringify(this.list));
    },
    cancel(key){
      this.list.splice(key,1);
       storage.setStorage("list",JSON.stringify(this.list));
    }
  }
  


  
}
</script>

<style>

let storage={
    setStorage(key,value){
        localStorage.setItem(key,value);
    },
    getStorage(key){
       return JSON.parse(localStorage.getItem(key));
    }
};
export default storage;