案例--vue_todolist

封装--localStorage本地化存储[持久化]

封装--localStorage本地化存储[持久化]_tby_pr的博客-CSDN博客

---

js

const store = new Store;
const key = ['todolist', 'donelist']
//初始化数据
store.set(key[0], [])
store.set(key[1], [])

const vm = new Vue({
  el: '#root',
  data: {
    //用户输入的内容
    cnt: '',
    //全选按钮
    all: false,
    //两个列表
    todolist: store.get(key[0]) || [],
    donelist: store.get(key[1]) || [],
    //两个列表的显示
    todo: true,
    done: false,
    //关键词
    keyword: ['admin', '小明', '小刚']
  },
  methods: {
    //切换显示
    toggle() {
      this.todo = true;
      this.done = false
    },
    toggle1() {
      this.todo = false;
      this.done = true
    },
    //批量添加按钮                
    add_all() {
      this.todolist = store.get(key[0])
      this.donelist = store.get(key[1])
      //加入之前判断一下是否有数据
      if (this.todolist.length) {
        this.todolist.forEach(item => this.donelist.push(item))
        store.set(key[1], this.donelist)
        this.todolist = []
        store.set(key[0], this.todolist)
      } else {
        alert('请先添加数据！')
      }
    },
    // 添加
    submit(ev) {
      //输入的内容不呢个超过10个，不能少于2个
      if (this.cnt.length < 2 || this.cnt.length >= 10) return alert('输入内容不能超过10个不能少于2个!!!')

      // 敏感词不可以提交!!!!!!!!!!!!!!!!!!!!!!!!
      const req = this.keyword.some(item => {
        return this.cnt.indexOf(item) !== -1
      })

      if (req) {
        alert('输入内容包含关键词,请重新输入!')
      } else {
        this.todolist = store.get(key[0])
        this.todolist.push({ id: Date.now(), name: this.cnt })
        store.set(key[0], this.todolist)
        this.cnt = ''
      }
    },
    // 删除按钮
    del(ev) {
      this.todolist = this.todolist.filter((item) => {
        return item.id !== ev.target.id - 0
      })
      store.set(key[0], this.todolist)
      this.donelist = this.donelist.filter((item) => {
        return item.id !== ev.target.id - 0
      })
      store.set(key[1], this.donelist)
    },
    //todolist 里面的已完成按钮
    finish(ev) {
      const arr = this.todolist.filter((item) => {
        return item.id === ev.target.id - 0
      })
      console.log(arr);
      this.todolist = this.todolist.filter((item) => {
        return item.id !== ev.target.id - 0
      })
      store.set(key[0], this.todolist)
      this.donelist = store.get(key[1])
      this.donelist.push(arr[0])
      store.set(key[1], this.donelist)
    },
    //donelist 里面的未完成按钮
    unfinish(ev) {
      const arr = this.donelist.filter((item) => {
        return item.id === ev.target.id - 0
      })
      this.donelist = this.donelist.filter((item) => {
        return item.id !== ev.target.id - 0
      })
      store.set(key[1], this.donelist)
      this.todolist = store.get(key[0])
      this.todolist.push(arr[0])
      store.set(key[0], this.todolist)
    }
  },
})

html

<div id="root">
  <ul>
    <li @click="toggle()">
      todo
    </li>
    <li @click="toggle1()">
      done
    </li>
  </ul>

  <ol v-show="todo">
    <!-- 输入框 -->
    <input type="text" v-model.trim="cnt" @keyup.enter="submit" placeholder="请输入内容">
    <input type="checkbox" v-model="all" class="all">全选
    <button v-show='all' @click="add_all">批量添加已完成</button>
    <li v-for="(item,key,index) in todolist">
      <input type="checkbox" v-model="all" :id="item.id">
      {{item.name}}
      <button :id="item.id" @click="del">删除</button>
      <button :id="item.id" @click="finish">已完成</button>
    </li>
  </ol>

  <ol v-show="done" style="margin-top: 60px;">
    <li v-for="(item,key,index) in donelist">
      <input type="checkbox">
      {{item.name}}
      <button :id="item.id" @click="del">删除</button>
      <button :id="item.id" @click="unfinish">未完成</button>
    </li>
  </ol>
</div>

css

* {
  margin: 0;
  padding: 0;
}
ul,ol,li {
  list-style: none;
}
#root {
  width: 400px;
  min-height: 300px;
  border: 1px solid #333;
  margin: 100px auto;
}
ul>li {
  float: left;
  width: 199px;
  text-align: center;
  height: 40px;
  font-size: 24px;
  border-bottom: 1px solid #333;
  border-right: 1px solid #333;
}
ol {
  width: 100%;
  min-height: 258px;
  margin-top: 20px;
}
input[type="text"] {
  width: 90%;
  height: 30px;
  margin: 20px;
  padding-left: 14px;
}
.all {
  margin-left: 20px;
}
ol>li {
  min-width: 90%;
  height: 40px;
  padding-left: 20px;
}