父组件代码
html部分
<template>
<section class="todoapp">
<!-- 头部+输入框 -->
<header class="header">
<h1>todos</h1>
<input
v-model="input"
@keyup.enter="add"
autocomplete="off"
placeholder="What needs to be done?"
class="new-todo"
/>
</header>
<!-- 列表 -->
<section class="main">
<ul class="todo-list">
<itemtodos
v-for="(item, index) in list"
:key="item.id"
:content="item"
:index="index"
@delete="handledelete"
>
</itemtodos>
</ul>
</section>
<!-- 统计 -->
<footer class="footer" v-show="list.length != 0">
<span class="todo-count"><strong>{{ list.length }}</strong> item left</span>
</footer>
</section>
</template>
js部分
<script type="text/javascript">
import itemtodos from './itemtodos'
export default {
components:{itemtodos},
data() {
return {
list: [],
input: "",
};
},
methods: {
add: function () {
this.list.push(this.input);
this.input="";
},
handledelete(index){
this.list.splice(index,1);
},
},
};
</script>
css部分
<style>
body {
background: #f5f5f5;
}
/* 头部+输入框 */
.todoapp {
position: relative;
}
.todoapp h1 {
position: fixed;
left: 43%;
margin-top: 20px;
font-size: 80px;
font-weight: 400;
color: rgba(175, 47, 47, 0.15);
}
.new-todo {
padding: 16px 16px 16px 60px;
background: rgba(0, 0, 0, 0.003);
}
.new-todo {
position: relative;
margin: 0;
width: 650px;
left: 630px;
top: 150px;
font-size: 24px;
font-family: inherit;
font-weight: inherit;
line-height: 1.4em;
color: inherit;
border: 1px solid rgb(221, 217, 217);
box-shadow: 0 2px 7px 0 rgb(152 133 133);
box-sizing: border-box;
background: white;
}
.index {
visibility: hidden;
}
/* 统计 */
.footer {
color: #777;
position: relative;
left: 630px;
top: 120px;
width: 650px;
height: 40px;
background: white;
box-shadow: 0 2px 7px 0 rgb(152 133 133);
}
.todo-count {
float: left;
padding-top: 10px;
padding-left: 10px;
}
</style>
子组件代码
html部分
<template>
<li>
{{content}}
<button class="destroy" @click="handleclick"></button>
</li>
</template>
js部分
<script>
export default {
props:['content','index'],
data(){
return{}
},
methods:{
handleclick(){
this.$emit("delete",this.index)
}
}
}
</script>
css部分
<style>
li{
position: relative;
left: 590px;
top: 135px;
width: 650px;
height: 40px;
font-size: 24px;
border-bottom: 1px solid #ededed;
display: block;
box-shadow: 0 2px 7px 0 rgb(152 133 133);
background: white;
}
.destroy:after {
content: "x";
}
.destroy {
position: absolute;
top: 0px;
left: 600px;
font-size: 25px;
color: #ffffff;
border: 0;
}
.destroy:hover {
color: #cc9a9a;
}
</style>
记录一下自己刚开始的步伐,只是一个简单的番茄todos,还有很多不足啦