vueclidtodo练习3 之勾选设置’
app中
<template> <div id="app"> <div class="todo-container"> <div class="todo-wrap"> <MyHeader :addTodo="addTodo"></MyHeader> <MyList :todos="todos" :checkTodo="checkTodo"></MyList> <MyFooter></MyFooter> </div> </div> </div> </template> <script> import MyFooter from './components/MyFooter.vue' import MyHeader from './components/MyHeader.vue' // import MyItem from './components/MyItem.vue' item为list的子组件 import MyList from './components/MyList.vue' // import School from './components/School.vue' export default { name: 'app', components: { MyHeader, MyFooter, // MyItem, MyList // School }, data() { return { todos:[ {id:"001",title:"吃饭",done:true}, {id:"002",title:"抽烟",done:false}, {id:"003",title:"烫头",done:true}, ] } }, methods: { //添加一个toido addTodo(todoObj){ this.todos.unshift(todoObj) }, // 勾选或者取消勾选 checkTodo(id){ this.todos.forEach((todo) => { if (todo.id===id) { todo.done=!todo.done; } }); } }, } </script> <style> /*base*/ body { background: #fff; } .btn { display: inline-block; padding: 4px 12px; margin-bottom: 0; font-size: 14px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); border-radius: 4px; } .btn-danger { color: #fff; background-color: #da4f49; border: 1px solid #bd362f; } .btn-edit { color: #fff; background-color: lightgreen; border: 1px solid green; margin-right: 5px; } .btn-danger:hover { color: #fff; background-color: #bd362f; } .btn-edit:hover { color: #fff; background-color: green; } .btn:focus { outline: none; } .todo-container { width: 600px; margin: 0 auto; } .todo-container .todo-wrap { padding: 10px; border: 1px solid #ddd; border-radius: 5px; } </style>
list 中
<template> <ul class="todo-main"> <MyItem v-for="(todoObj) in todos" :key="todoObj.id" :todo="todoObj" :checkTodo="checkTodo" ></MyItem> </ul> </template> <script> import MyItem from "./MyItem"; export default { name:"MyList", components:{MyItem}, /* data() { return { todos:[ {id:"001",title:"吃饭",done:true}, {id:"002",title:"抽烟",done:false}, {id:"003",title:"烫头",done:true}, ] } }, */ props:[ "todos", "checkTodo" ] } </script> <style> /*main*/ .todo-main { margin-left: 0px; border: 1px solid #ddd; border-radius: 2px; padding: 0px; } .todo-empty { height: 40px; line-height: 40px; border: 1px solid #ddd; border-radius: 2px; padding-left: 5px; margin-top: 10px; } </style>
item 中
<template> <transition> <li> <label> <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/> <span>{{todo.title}}</span> <!-- <input type="text"> --> </label> <button class="btn btn-danger" >删除</button> <!-- <button class="btn btn-edit">编辑</button> --> </li> </transition> </template> <script> export default { name:"MyItem", //声明接受tudu对象 props:['todo',"checkTodo"], // mounted() { // console.log(this.todo) // }, methods: { handleCheck(id){ this.checkTodo(id); } }, } </script> <style> /*item*/ 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; } .todo-enter-active{ animation: todo 0.5s linear; } .todo-leave-active{ animation: todo 0.5s linear reverse; } @keyframes todo { from{ transform: translateX(100%); } to{ transform: translateX(0px); } } </style>