<template><div?:class="['todo-item',?todo.completed???'completed'?:?'']"><inputtype="checkbox"class="toggle"v-model="todo.completed"><label>{{?todo.content?}}</label><button?class="destroy"?@click="deleteTodo"></button></div></template><script>export?default?{props:?{todo:?{type:?Object,required:?true}},methods:?{deleteTodo()?{this.$emit('del',?this.todo.id);}}}</script><style?lang="stylus"?scoped>.todo-item?{position:?relative;background-color:?#fff;font-size:?24px;border-bottom:?1px?solid?rgba(0,?0,?0,?0.06);&:hover?{.destroy:after?{content:?'x'}}label?{white-space:?pre-line;word-break:?break-all;padding:?15px?60px?15px?15px;margin-left:?45px;display:?block;line-height:?1.2;transition:?color?0.4s;}&.completed?{label?{color:?#d9d9d9;text-decoration:?line-through;}}}.toggle?{text-align:?center;width:?40px;height:?40px;position:?absolute;top:?0;bottom:?0;margin:?0?auto;appearance:?none;outline:?none;border:?none;&:after?{content:?url('../assets/images/round.svg');}&:checked:after?{content:?url('../assets/images/done.svg');}}.destroy?{position:?absolute;top:?0;right:?10px;bottom:?0;width:?40px;height:?40px;margin:?0?auto;font-size:?30px;color:?#cc9a9a;margin-bottom:?11px;transition:?color?0.2s?ease-out;background-color:?transparent;appearance:?none;border-width:?0;cursor:?pointer;outline:?none;}</style>