vue学习笔记——结合双向数据绑定实现todolist【本地存储、模块化】

vue实现todolist效果，使得数据可以动态变化，v-model对于此效果的实现是至关重要的，而且比用其他语言实现这一效果都要高效许多；

初步代码实现如下：

<template>
  <div id="app">
  <input type="text" v-model="todo" @keydown="doAdd($event)">
  <br>
  <br>
  <hr>
  <h2>进行中</h2>
  <ul>
    <li v-for="(item,key) in list" :key="key" v-if="!item.checked">
      <!-- 双向数据绑定，绑定item.checked，使得视图与数据操作相互影响 -->
      <input type="checkbox" v-model="item.checked" @change="saveList()">
    {{item.title}}
    ---------<button @click="remotedate(key)">删除</button></li>
  </ul>
    <h2>已完成</h2>
    <ul>
    <li v-for="(item,key) in list" :key="key" v-if="item.checked">
      <input type="checkbox" v-model="item.checked" @change="saveList()">
    {{item.title}}
    ---------<button @click="remotedate(key)">删除</button></li>
  </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todo: "",
      list: []
    };
  },
  methods: {
    // es6定义方法的写法
    doAdd(e) {
      if (e.keyCode == 13) {
        this.list.push({
          title: this.todo,
          checked: false
        });
        // 增加的数据进行本地存储
        localStorage.setItem('key', JSON.stringify(this.list));
      }
      this.todo = "";
    },
    remotedate(key) {
      this.list.splice(key, 1);
      // 删除的数据进行本地存贮
      localStorage.setItem('key', JSON.stringify(this.list));
    }
    ,
    saveList(){
      // 对于checkbox的变化进行存储
      localStorage.setItem('key', JSON.stringify(this.list));
    }
  },
  // vue结合双向数据绑定实现todolist
  mounted(){  
    // 页面刷新时获取列表数据
    var list=JSON.parse(localStorage.getItem('key'));
    if(list!=null)
    this.list=list;
  }
};
</script>

<style >
</style>

输入框对列表项的增加监听是通过监听是否在键盘按了回车来实现的，回车键码为13

实现效果如下：（只实现效果，没有渲染样式）

优化代码：

这样的写法虽然实现了功能效果，但是对于缓存这一块的代码实现是比较乱的，可以把缓存数据列表这一块进行模块化；

1.在src文件目录下创建一个文件夹model，在model中创建storage.js文件；

// 对列表进行缓存
var storage={
    set(key,value){
        localStorage.setItem(key, JSON.stringify(value));
    },
    get(key){
       return JSON.parse(localStorage.getItem(key));
    }
}
export default storage;

2.在app.vue中引入该模块

<script>
import storage from "./model/storage.js";
export default {
  data() {
    return {
      todo: "",
      list: []
    };
  },
  methods: {
    // es6定义方法的写法
    doAdd(e) {
      if (e.keyCode == 13) {
        this.list.push({
          title: this.todo,
          checked: false
        });
        // 增加的数据进行本地存储
        storage.set("list", this.list);
      }
      this.todo = "";
    },
    remotedate(key) {
      this.list.splice(key, 1);
      // 删除的数据进行本地存贮
      storage.set("list", this.list);
    },
    saveList() {
      // 对于checkbox的变化进行存储
      storage.set("list", this.list);
    }
  },
  // vue结合双向数据绑定实现todolist
  mounted() {
    // 页面刷新时获取列表数据
    var list = storage.get("list");
    if (list != null) this.list = list;
  }
};
</script>

模块化的写法，使得同样的功能，实现起来更加简洁，而且提高了代码的复用性

vue学习笔记——结合双向数据绑定实现todolist【本地存储、模块化】

猜你喜欢