下午茶的时间到了,休息一下吧!

Vue.js小Demo:TodoList

   

看到非常多的Vue.js入门问答及教程,都有提到做一个TodoList的Demo,所以我就跟着教程写了一遍,然后不看教程再自己写一个,增加了未完成排到前面的小功能(其实就是数组的sort()排序<{=..)。同样的,数据依然直接采用localStorage储存,写完感觉Vue.js数据双向绑定挺不错,不需要操作DOM。

代码如下:

  1. <div id="app">
  2.   <div>
  3.     <input type="text" class="addInput" placeholder="请输入待办事项" v-model="todo.content" @keydown.enter="addTodo">
  4.   </div>
  5.   <div class="unit" v-for="(item,index) in lists">
  6.     <input type="checkbox" class="cb" :checked="item.finished" @click="changeStatus(index)">
  7.     <span :class="{'finish':item.finished,'no':true}">{{index+1}}</span>
  8.     <span :class="{'finish':item.finished,'con':true}">{{item.content}}</span>
  9.     <button type="button" class="delBtn" @click="delItem(index)">×</button>
  10.   </div>
  11.   <div class="empty" v-if="lists.length === 0">
  12.     暂无内容!
  13.   </div>
  14. </div>
  15. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  16. <script>
  17. var ls = window.localStorage;
  18.   var lsLists = new Array();
  19.   if (ls.getItem("lists") != null) {
  20.     //从localStorage取出JSON字符串,并转为对象
  21.     lsLists = JSON.parse(ls.getItem("lists"));
  22.   }
  23.   var vm = new Vue({
  24.     el: '#app',
  25.     data: {
  26.       lists:lsLists,
  27.       todo:{
  28.         content:'',
  29.         finished:false,
  30.         deleted:false
  31.       }
  32.     },
  33.     methods:{
  34.       //添加
  35.       addTodo(){
  36.         this.lists.unshift(this.todo);
  37.         //根据完成状况排序
  38.         this.lists.sort(sortF);
  39.         //将对象转为JSON字符串
  40.         ls.setItem("lists",JSON.stringify(this.lists));
  41.         this.todo = {
  42.           content : '',
  43.           finished:false,
  44.           deleted:false
  45.         };
  46.       },
  47.       //改变状态
  48.       changeStatus(i){
  49.         let thisStatus = this.lists[i].finished;
  50.         //状态翻转
  51.         this.lists[i].finished = !thisStatus;
  52.         //根据完成状况排序
  53.         this.lists.sort(sortF);
  54.         //将对象转为JSON字符串
  55.         ls.setItem("lists",JSON.stringify(this.lists));
  56.       },
  57.       //删除
  58.       delItem(i){
  59.         //删除当前index=i的一条
  60.         this.lists.splice(i,1);
  61.         //将对象转为JSON字符串
  62.         ls.setItem("lists",JSON.stringify(this.lists));
  63.       }
  64.     }
  65.   });
  66.   function sortF(a,b){
  67.     console.log(a.finished,b.finished)
  68.        return a.finished-b.finished;
  69.     }
  70. <script>

代码在线预览

未经允许不得转载:Rising Sun's Blog » JS / Vue.js / 前端 » Vue.js小Demo:TodoList
标签:
评论 0
 
 
发表评论