Vue的todolist实例 Vue 中的模块化以及封装Storage实现todolist 待办事项 已经完成 和进行中持久化

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u011464124/article/details/88884328

双向绑定

App.vue

<template>
  <div id="app">

    <input type="text" v-model="todo">

    <button @click="doAdd()">+增加</button>

    <ul>
      <li v-for="(item,key) in list">
        {{item}} --- <button @click="removeData(key)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      todo:'',
      list:[],
    }
  },
  methods:{
    doAdd(){
      //alert(this.todo);
      //获取text里面的值放入list
      this.list.push(this.todo);
      this.todo='';
    },
    //此处的data是形参,也可以写成key
    removeData(key){
      //alert(data);
      //删除功能array.splice(index,num)
      this.list.splice(key,1);
    },
  }
}
</script>

运行截图：

list双向绑定高级：

App.vue

<template>
  <div id="app">

    <!-- Input增加键盘监听事件 -->
    <input type="text" v-model="todo" @keydown="doAdd($event)">


    <!-- <button @click="doAdd()">+增加</button> -->

    <h2>进行中</h2>

    <ul>
      <li v-for="(item,key) in list" v-if="!item.checked">
        <input type="checkbox" v-model="item.checked">{{item.title}} --- <button @click="removeData(key)">删除</button>
      </li>
    </ul>

    <h2>已完成</h2>

    <ul class="finish">
      <li v-for="(item,key) in list" v-if="item.checked">
        <input type="checkbox" v-model="item.checked">{{item.title}} --- <button @click="removeData(key)">删除</button>
      </li>
    </ul>

    <h2 v-if='ok'>这是一个true</h2>
    <h2 v-if='!ok'>这是一个false</h2>

    <button @click="getList">获取list的值</button>

  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      ok:true,
      todo:'',
      list:[],
    }
  },
  methods:{
    doAdd(e){
      console.log(e.keyCode)
      //alert(this.todo);
      //获取text里面的值放入list
      if(e.keyCode==13){
      this.list.push({
        title:this.todo,
        checked:false,
        });
      this.todo='';
      }
    },
    //此处的data是形参,也可以写成key
    removeData(key){
      //alert(data);
      //删除功能array.splice(index,num)
      this.list.splice(key,1);
    },
    getList(){
      console.log(this.list);
    },
  }
}
</script>

<style lang="scss">
  .finish{
    li{
      background: #eee;
    }
  }
</style>

运行截图：
在input框输入文字，加入到进行中下面

Vue 中的模块化以及封装Storage实现todolist 待办事项 已经完成 和进行中持久化：

实现了：
在Input框输入后进入到“进行中”，点击“进行中”的某个checkbox，会进入到已完成，同时封装了strorage.js方法实现刷新页面，数据的持久化显示

App.vue

<template>


  <div id="app">

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

      <hr>
    <br>

    <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}}   --  <button @click="removeData(key)">删除</button>
        </li>
      </ul>

    <br>
    <br>
    <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}}  -- <button @click="removeData(key)">删除</button>
        </li>
      </ul>
  </div>
</template>

<script>


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

    //console.log(storage);

    export default {
      data () {
        return {

          todo:'' ,
          list: []
        }
      },
      methods:{

        doAdd(e){
              // console.log(e);
              //键盘监听，keycode==13为回车
              if(e.keyCode==13){
                  this.list.push({
                    title:this.todo,
                    checked:false
                  })
              }

              storage.set('list',this.list);
        },
        removeData(key){

            this.list.splice(key,1)

            storage.set('list',this.list);
        }
        , saveList(){

           storage.set('list',this.list);
        }

      },mounted(){   /*生命周期函数       vue页面刷新就会触发的方法*/

          var list=storage.get('list');

          if(list){  /*注意判断*/
            this.list=list;
          }
      }

    }
</script>


<style lang="scss">

.finish{


  li{
    background:#eee;
  }
}

</style>

封装：
storage.js

//封装操作localstorage本地存储的方法   模块化的文件


// nodejs  基础



var storage={

    set(key,value){

        localStorage.setItem(key, JSON.stringify(value));
    },
    get(key){

        return JSON.parse(localStorage.getItem(key));
    },remove(key){
        localStorage.removeItem(key);
    }

}

export default storage;

运行截图：