isChecked: false //是否已完成
})
this.$refs.currentInput.value = "" //按下enter添加todo之后把输入框value清零
window.localStorage.setItem("content",JSON.stringify(this.todoLists))//使用localStorage以JSON格式存储数据
},
把每条todo的对应状态都存在同一个对象当中,在操作改变todo状态的时候不会被统一处理,使得每条todo都有单独的状态。
单条删除单条删除todo
<li class="content_todoList"
v-for="(list,index) in todoLists"
@mouseover="list.isActive = true" //鼠标移入todo改变对应todo的isActive状态
@mouseleave="list.isActive=false" //鼠标移出todo改变对应todo的isActive状态
<span class="el-icon-close content_todoList_delete"
:class="{show: list.isActive}" //动态绑定class使鼠标移动到某一todo显示X图标
@click="deleteTodo(index)"> //绑定删除单条todo事件
</span>
</li>
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已完成已完成
<input type="checkbox" class="checkBox"
v-model="list.isChecked">//双向绑定isChecked
<div class="content_todoList_main"
@dblclick="toEdit(list)" //双击事件
v-show="!list.isEditing" //切换元素
:class="{deleted:list.isChecked}"> //动态绑定class该表已完成todo样式
{{list.value}}
</div>
<input type="text" class="content_todoList_main main_input"
v-model="list.value" //双向绑定可输入value
v-show="list.isEditing" //切换元素
v-todo-focus="list.value" //自定义指令,双击之后自动focus对焦
@blur="unEdit(list)"> //绑定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已完成已完成
<span
评论0
最新资源