8. 实现 todoList 待办事项功能

基本实现

示例

<script>
  export default {
    data() {
      return {
        todo: '',
        list: []
      };
    },
    methods: {
      addData() {
        this.list.push({
          title: this.todo,
          checked: false
        })
        this.todo = ''
      },
      deleteData(index) {
        this.list.splice(index, 1)
      }
    }
  };
</script>

<template>
  <div>
    <h2>Vue 实现 TodoList</h2>
    <div class="todolist">
      <input type="text" v-model="todo" @keyup.enter="addData()" />
      <hr>
      <h4>正在进行</h4>
      <!-- <ul>
        <li v-for="(item, index) in list" :key="index" v-show="!item.checked">
          <input type="checkbox" v-model="item.checked"/>{{ item.title }} ----
          <button @click="deleteData(index)">删除</button>
        </li>
      </ul> -->
      <ul>
        <template v-for="(item, index) in list" :key="index">
          <li v-if="!item.checked">
            <input type="checkbox" v-model="item.checked"/>{{ item.title }} ----
            <button @click="deleteData(index)">删除</button>
          </li>
        </template>
      </ul>
      <h4>已经完成</h4>
      <ul>
        <li v-for="(item, index) in list" :key="index" v-show="item.checked">
          <input type="checkbox" v-model="item.checked"/>{{ item.title }} ----
          <button @click="deleteData(index)">删除</button>
        </li>
      </ul>
      <pre>{{ list }}</pre>
    </div>
  </div>
</template>

使用 localStorage 实现缓存

1. src/App.vue

<script>
  import storage from './model/storage'

  export default {
    data() {
      return {
        todo: '',
        list: []
      };
    },
    methods: {
      addData() {
        this.list.push({
          title: this.todo,
          checked: false
        })
        storage.set('todolist', this.list)
        this.todo = ''
      },
      deleteData(index) {
        this.list.splice(index, 1)
        storage.set('todolist', this.list)
      },
      setTodoList() {
        storage.set('todolist', this.list)
      }
    },
    // 页面加载的时候触发的方法
    mounted() {
      let todolist = storage.get('todolist')
      if (todolist) {
        this.list = todolist
      }
    }
  };
</script>

<template>
  <div>
    <h2>Vue 实现 TodoList</h2>
    <div class="todolist">
      <input type="text" v-model="todo" @keyup.enter="addData()" />
      <hr>
      <h4>正在进行</h4>
      <!-- <ul>
        <li v-for="(item, index) in list" :key="index" v-show="!item.checked">
          <input type="checkbox" v-model="item.checked"/>{{ item.title }} ----
          <button @click="deleteData(index)">删除</button>
        </li>
      </ul> -->
      <ul>
        <template v-for="(item, index) in list" :key="index">
          <li v-if="!item.checked">
            <input type="checkbox" v-model="item.checked" @change="setTodoList" />{{ item.title }} ----
            <button @click="deleteData(index)">删除</button>
          </li>
        </template>
      </ul>
      <h4>已经完成</h4>
      <ul>
        <li v-for="(item, index) in list" :key="index" v-show="item.checked">
          <input type="checkbox" v-model="item.checked"  @change="setTodoList" />{{ item.title }} ----
          <button @click="deleteData(index)">删除</button>
        </li>
      </ul>
      <pre>{{ list }}</pre>
    </div>
  </div>
</template>

2. src/model/storage.js

export default {
    set(key, obj) {
        localStorage.setItem(key, JSON.stringify(obj))
    },
    get(key) {
        return JSON.parse(localStorage.getItem(key))
    },
    remove(key) {
        localStorage.removeItem(key)
    }
}

localStorage 里面的方法

• localStorage.setItem(key,value)
• localStorage.getItem(key)
• localStorage.removeItem(key)
• localStorage.clear()