vue学习@change和checkbox使用以及使用localStorge进行本地缓存

 

<template>
  <div id="app">

    <input type='text' v-model="todo" @keydown="doadd($event)">

    <h2>进行中</h2>
    <ul>
      
      <li v-for="(item,key) in list" v-if="!item.checked">
        <input type='checkbox' v-model="item.checked" @change="savelist()">{{item.title}}</input><button @click="removeData(key)">删除</button>
      </li>
    </ul>
    <br>
    <br>
    <h2>已完成</h2>
    <ul>
      <li v-for="item in list" v-if="item.checked"> 
        <input type='checkbox' v-model="item.checked" @change="savelist()">{{item.title}}</input><button @click="removeData(key)">删除</button>
      </li>
    </ul>
    <br>
    <br>
  </div>
</template>

<script>

import storage from './model/storage.js'

export default {
  /*
  上香数据绑定 MVVM vue就是一个MVVM的框架
  M model
  V view
  MVVM: model改变会影响试图view,view试图改变反过来会影响model
  双向数据绑定必须在表单里面使用

  */
  data () {  /*业务逻辑里面定义的数据*/
    return {
      msg: '你好 vue',
      todo:"",
      list:[],
    }
  },
  methods: {
    doadd(e){
      if(e.keyCode==13){
        this.list.push({
          title:this.todo,
          checked:false
        });      
      }
      localStorage.setItem('list',JSON.stringify(this.list));//localStorage会可以将第一次请求的数据直接存储到本地
    },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>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.red{
  color:red;
}
.blue{
  color:blue;
}
.box{
  height:100px;
  background:red;
}
</style>