很晚了哦，注意休息呀！

Vue.js小Demo：TodoList

发布于2018-6-8 分类：JS / Vue.js / 前端 评论(0) 阅读(2,347)
　　　

看到非常多的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.   }
  24.   var vm = new Vue({
  25.     el: '#app',
  26.     data: {
  27.       lists:lsLists,
  28.       todo:{
  29.         content:'',
  30.         finished:false,
  31.         deleted:false
  32.       }
  33.     },
  34.     methods:{
  35.       //添加
  36.       addTodo(){
  37.         this.lists.unshift(this.todo);
  38.         //根据完成状况排序
  39.         this.lists.sort(sortF);
  40.         //将对象转为JSON字符串
  41.         ls.setItem("lists",JSON.stringify(this.lists));
  42.         this.todo = {
  43.           content : '',
  44.           finished:false,
  45.           deleted:false
  46.         };
  47.       },
  48.       //改变状态
  49.       changeStatus(i){
  50.         let thisStatus = this.lists[i].finished;
  51.         //状态翻转
  52.         this.lists[i].finished = !thisStatus;
  53.         //根据完成状况排序
  54.         this.lists.sort(sortF);
  55.         //将对象转为JSON字符串
  56.         ls.setItem("lists",JSON.stringify(this.lists));
  58.       },
  59.       //删除
  60.       delItem(i){
  61.         //删除当前index=i的一条
  62.         this.lists.splice(i,1);
  63.         //将对象转为JSON字符串
  64.         ls.setItem("lists",JSON.stringify(this.lists));
  65.       }
  66.     }
  67.   });
  68.   function sortF(a,b){
  69.     console.log(a.finished,b.finished)
  70.        return a.finished-b.finished;
  71.     }
  72. <script>

代码在线预览

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