Vue官网todoMVC示例代码

这个示例是模仿官网示例样式和功能用我自己的方式写的,基本上没有看官网的源码,只参考自定义指令。让我们一步步来探讨一下。官网demo

成都创新互联专业提供雅安电信机房服务,为用户提供五星数据中心、电信、双线接入解决方案,用户可自行在线购买雅安电信机房服务,并享受7*24小时金牌售后服务。

要实现的功能

  1. 单条添加todo
  2. 单条删除todo
  3. 双击编辑todo
  4. 单条todo已完成相应样式状态改变
  5. 全部todo是已完成相应样式状态改变
  6. 清除全部已完成todos
  7. 待办todos数量显示
  8. 所有todos,已完成todos,未完成todos筛选

Vue官网todoMVC示例代码

单条添加todo

//操作input元素使enter一下之后清空输入框内容
data() {//一些初始化数据
 return {
  todolists: [],
  dataStatus: ["All", "Active", "Completed"],
  dataStatusIndex: 0,
  whichShow: true,
  defaultShow: true
 }
},
addTodo(e) { //添加todo
 var val = e.value
 if (val === "") {return} //如果输入内容为空则立即返回
 this.todoLists = this.todoLists.concat({//使用concat这个api添加todo
  value: val, //输入内容
  isEditing: false, //是否在编辑状态
  isActive: false, //删除X图标是否激活
  isChecked: false //是否已完成
 })
 this.$refs.currentInput.value = "" //按下enter添加todo之后把输入框value清零
 window.localStorage.setItem("content",JSON.stringify(this.todoLists))//使用localStorage以JSON格式存储数据
},

把每条todo的对应状态都存在同一个对象当中,在操作改变todo状态的时候不会被统一处理,使得每条todo都有单独的状态。

单条删除todo

 
  • //绑定删除单条todo事件
  • deleteTodo(index) { //删除单条todo
      this.todoLists.splice(index, 1)//使用splice的api
      window.localStorage.setItem("content",JSON.stringify(todoLists)) //以JSON格式存储数据//localStorage存储数据
    },

    在每个li元素上绑定了鼠标移入和移除的事件来动态的改变每个todo的isActive,然后再使用isActive动态显示class。

    双击编辑todo&&单条todo已完成

    //双向绑定isChecked
    
    
    //动态绑定class该表已完成todo样式 {{list.value}}
    //绑定blur失去焦点事件
    methods: {
     toEdit(obj) { //使添加的todothing可编辑
      obj.isEditing = true
     },
     
     unEdit(obj) { //使添加的todothing不可编辑
      obj.isEditing = false
     },
    }
    
    directives: { //自定义focus指令,需要一个binding参数做判断
     "todo-focus": function (el, binding) {
      if (binding.value) {
       el.focus()
      }
     }
    }
    
    

    通过每个todo里的isEditing属性控制show和是否可编辑两个状态,双击div之后改变当前todo的isEditing为true,从而显示为input,input失去焦点之后再通过blur事件改为false。

    通过todo的idChecked来控制是否已完成,从而动态改变样式。

    全部todos已完成

     //全部已完成事件
    selectAllTodos() { //设置所有todo为已完成,使用map的api通过todo的isChecked属性操作
     this.todoLists.map(todo => todo.isChecked = todo.isChecked ? false : true)
    }
    

    待办todos数量显示

    //times为0显示item,大于0显示items,细节注定成败 {{times}}  item left
    {{times}}  items left
    computed: {
     times() { //使用计算属性计算待办todos的次数 
      let todoArr = this.todoLists
      let times = 0
      for (let i = 0; i < todoArr.length; i++) {
       if (todoArr[i].isChecked === false) {
        times++
       }
      }
      return times
     }
    },

    使用了计算属性对todoLists计算,用for循环刷选出idChecked为true的累加,最后返回times。

    清除全部已完成todos

    //如果待办事件次数小于总todoLists长度就显示“clear completed” clear completed
    //如果待办事件次数等于总todoLists长度就显示“clear completed”
    clearTodos() { //清空已完成的todoLists,使用filter的api进行筛选
     this.todoLists = this.todoLists.filter(todo => todo.isChecked === false)
     window.localStorage.setItem("content",JSON.stringify(this.todoLists)) //以json格式存储数据
    },

    如果待办todos的times小于todoLists长度,就证明有已完成的todo,就可以显示“clear completed”,如果相等就说明没有已完成的todo。

    三种状态筛选

    所有todos,已完成todos,未完成todos筛选

  • switchStatus(index) { //通过if条件判断操作
     this.dataStatusIndex = index
     if (this.dataStatus[index] === "Active") {
      this.defaultShow = false
      this.whichShow = false
     } else if (this.dataStatus[index] === "Completed") {
      this.defaultShow = false
      this.whichShow = true
     } else if (this.dataStatus[index] === "All") {
      this.defaultShow = true
     }
    },
    

    我这里是同时if条件句判断操作,有点麻烦,目前还没有想出来其他方案。在li元素使用三元运算符和或运算符进行操作显示不同状态的todos。

    完整代码

    
    
    
    
     
    todos
    • {{list.value}}
    {{times}} item left
    {{times}} items left

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


    分享题目:Vue官网todoMVC示例代码
    路径分享:http://myzitong.com/article/jjchid.html