Vue中TodoList案例

Vue中TodoList案例_动画

MyItem.vue : 主要是引入了import 'animate.css'样式库，animate.css样式库配置见上一篇文章animate.css样式库，然后再li标签外套了transition标签，引用了name里面的名称是animate.css拿过来的，绑定了enter-active-class和leave-active-classanimate库内自带的绑定样式

<template><!--appear上来就有动画--><transitionname="animate__animated animate__bounce"appearenter-active-class="animate__jackInTheBox"leave-active-class="animate__zoomOutDown"><li><label ><input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/> <!--给input指定一个checked选项，如果是true就勾选上，如果是false就不勾选--><span v-show="!todo.isEdit">{{todo.title}}</span><inputtype="text"v-show="todo.isEdit":value="todo.title"@blur="handleBlur(todo,$event)"ref="inputTitle"></label><button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button><button class="btn btn-edit" @click="handleEdit(todo)" v-show="!todo.isEdit">编辑</button></li></transition>
</template><script>
import 'animate.css'
import pubsub from 'pubsub-js'
export default {name: "MyItem",//声明接收对象props:['todo',],methods:{//勾选or取消勾选handleCheck(id){//通知App组件将对应的todo对象的done值取反// this.checkTodo(id)this.$bus.$emit('checkTodo',id)},//删除handleDelete(id){if (confirm('确定删除吗')){  //confirm根据用户的交互来决定到底是布尔值为真还是为假，点击确定为真，点击取消为假// this.deleteTodo(id)pubsub.publish('deleteTodo',id)}},//编辑handleEdit(todo){if (todo.hasOwnProperty.call('isEdit')){todo.isEdit = true}else {console.log('a@@')this.$set(todo,'isEdit',true)}// setTimeout(()=>{//   this.$refs.inputTitle.focus()// },20)this.$nextTick(function (){this.$refs.inputTitle.focus()})},//失去焦点回调（真正执行修改逻辑）handleBlur(todo,e){todo.isEdit=falseif (!e.target.value.trim())return alert('输入不能为空')this.$bus.$emit('updateTodo',todo.id,e.target.value)}}
}
</script><style scoped>
li{list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1px solid #ddd;
}
li label{float:left;cursor: pointer;
}li label li input{vertical-align: middle;margin-right: 6px;position: relative;top: -1px;
}li button{float: right;display: none;margin-top: 3px;
}li:before{content: initial;
}
li:last-child{border-bottom: none;
}
li:hover{background-color: #ddd;
}
li:hover button{display: block;
}
</style>