Vue数据双向案例

一 用数据双向实现待办处理事项的小案例：

一 该案例实现的功能

（1）在输入输入文字，点击“添加按钮”添加到未完成事项中；
（2）当输入框为空时，会提示请输入事项；

（3）每个事项的复选框：点击时可以实现分组交换功能；
（4）移除：点击时，该事件被移除；

二 所使用的技术

（1）Vue中的数据双向，MVVM模式开发模式；
（2）H5中的本地缓存，缓存页面数据；

三 该案例核心代码

<template>
  <div id="app">
    <div class="title"><span>ToDo list</span>
      <div class="title-ipt">
        <label>添加事项：</label>
        <!-- 数据双向v-model="usertext" -->
        <input type="text" placeholder="输入事项...." v-model="usertext" @keypress="userkeyDown">
        <button @click="addData"> 添加</button>
      </div>
    </div>
    <!-- 下面的事项 -->
    <div class="content">
        <ul>
          <li class="li-info">
              <p class="li-name">未完成事项：</p>
              <ul>
                <li class="li-info" v-for="(item,index) in list" :key="index" v-if="!item.isfinish">
                    <input type="checkbox" @click="changeStatus(index)" :checked="item.isfinish" />
                    <span>{{item.name}}</span>
                    <a href="javascript:void(0)" @click="removeData(index)">-----移除</a> 
                </li>
              </ul>
              <p class="li-name">已完成事件：</p>
              <ul>
                <li class="li-info" v-for="(item,index) in list" :key="index" v-if="item.isfinish">
                    <input type="checkbox" @click="changeStatus(index)" :checked="item.isfinish" />
                    <span>{{item.name}}</span>
                    <a href="javascript:void(0)" @click="removeData(index)">-----移除</a> 
                </li>
              </ul>
          </li>
        </ul>
    </div>
  </div>
</template>

<script>
//使用storage HTML5缓存  缓存数据 刷新后数据还在

//如何做js代码的模块封装
//storage模块的封装

//使用封装的storage模块
import storage from './storage/Storage.js';

export default {
  name: 'app',
  data () {
    return {
      usertext:"",
      list:[]
    }
  },
  mounted() {
    //组件挂载完成之后执行这个方法
    //读取写入的缓存
    this.list=Storage.getStorage("msg");
    if(!this.list){
      this.list=[]
    }
  },
  methods: {
    addData(){
      if(!this.usertext.length){
        alert("请输入事项.....");
        return;
      }
      //事件调用的方法
      console.log(this.usertext);
      //重新构建一个json对象
      let json={
        name:this.usertext,
        isfinish:false
      };
      this.list.push(json);
      this.usertext="";
      //写入缓存
      Storage.setStorage("msg",JSON.stringify(this.list));
      
    },
    changeStatus(index){
      //修改索引对应的状态
      this.list[index].isfinish=!this.list[index].isfinish;
     //写入缓存
      Storage.setStorage("msg",JSON.stringify(this.list));
       
    },
    removeData(index){
      //根据传递的索引移除数据
      this.list.splice(index,1);
      //写入缓存
      Storage.setStorage("msg",JSON.stringify(this.list));
      
    },
    userkeyDown(e){
      let code=e.which||e.charCode;
      //code=13表示回车按键
      if(code===13){
        //调用上面添加的方法
        this.addData();
      }
    }
  }
}
</script>