话不多说上代码
<template>
<div id="app">
<!-- header -->
<Header/>
<AddTodo v-on:handleAdd="handleAdd"/>
<Todos :todos="todos" @handleDelete="handleDelete"/>
</div>
</template>
<script>
import Todos from "./components/Todos";
import Header from "./components/layout/Header";
import AddTodo from "./components/layout/AddTodo";
export default {
name:"app",
data(){
return{
msg:"hello",
todos:[
{
id:1,
title:"代办事项1",
completed:false
},
{
id:2,
title:"代办事项2",
completed:false
},
{
id:3,
title:"代办事项3",
completed:false
},
]
}
},
components:{
Todos,
Header,
AddTodo,
},
methods:{
handleDelete(id){
// console.log(id);
this.todos=this.todos.filter(todo =>todo.id !==id)
},
handleAdd(newTodo){
// this.todos.unshift(newTodo);
this.todos=[...this.todos,newTodo]
}
}
}
</script>
<style>
*{
box-sizing:border-box;
margin: 0;
padding: 0;
}
body{
font-family: Arial, Helvetica, sans-serif;
line-height: 1.4;
}
</style>
vue>src>commponents>Todoo.vue
<template>
<div>
<div :key="todo.index" v-for="(todo) in todos">
<!-- <Todoitem :todo="todo" @deleteItem="deleteItem"/> -->
<Todoitem :todo="todo" @deleteItem="$emit('handleDelete',todo.id)"/>
</div>
</div>
</template>
<script>
import Todoitem from './Todoitem';
export default {
name:"Todos",
props:{
todos:{
type:Array
}
},
components:{
Todoitem
},
methods:{
// deleteItem(id){
// console.log(id);
// }
}
};
</script>
<style scoped>
</style>
<template>
<div class="todo-item" :class="{'is-complete':todo.completed}">
<p>
<input type="checkbox" @change="markComplete">
{{todo.title}}
<button class="del" @click="$emit('deleteItem',todo.id)">x</button>
</p>
</div>
</template>
<script>
export default {
name:"Todos",
props:["todo"],
methods:{
markComplete(){
// console.log(this.todo);
this.todo.completed = !this.todo.completed;
}
}
}
</script>
<style scoped>
.todo-item{
background: #f4f4f4;
padding: 10px;
border-bottom: 1px #ccc dotted;
}
.is-complete{
text-decoration: line-through;
}
.del{
background: #ff0000;
color: #fff;
border: none;
padding: 5px 9px;
border-radius: 50%;
cursor: pointer;
float: right;
}
</style>
<template>
<div>
<form @submit="addTodo">
<input v-model="title" type="text" name="title" placeholder="请添加代办事项……"/>
<input type="submit" value="添加" class="btn">
</form>
</div>
</template>
<script>
import uuid from "uuid";
export default {
name:"AddTodo",
data(){
return{
title:""
}
},
methods:{
addTodo(e){
e.preventDefault();
// console.log('title:', this.title)
const newTodo={
id:uuid.v4(),
title:this.title,
completed:false
};
console.log('tag',newTodo )
//注册事件
this.$emit("handleAdd",newTodo)
this.title="";
}
}
}
</script>
<style scoped>
form{
display:flex;
}
input[type="text"]{
flex:10;
padding: 5px;
}
input[type="submint"]{
flex: 2;
}
.btn{
display: inline-block;
border: none;
background: #555;
color:#fff;
padding:7px 20px;
cursor: pointer;
}
.btn:hover{
background: #666;
}
</style>
<template>
<header class="header">
<h1>代办事项</h1>
</header>
</template>
<script>
export default {
name: 'Header',
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header{
background: #333;
color:#fff;
text-align: center;
padding:10;
}
</style>
运行效果
一入前端深似海