-
{{list.value}}
这个示例是模仿官网示例样式和功能用我自己的方式写的，基本上没有看官网的源码，只参考自定义指令。让我们一步步来探讨一下。官网demo
成都创新互联专业提供雅安电信机房服务，为用户提供五星数据中心、电信、双线接入解决方案，用户可自行在线购买雅安电信机房服务，并享受7*24小时金牌售后服务。
要实现的功能
单条添加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
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
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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。