vue小黑记事本

<template>
  <div class="home">
    <h1>小黑记事本</h1>
	<input class="el-input" type="text" v-model="input" placeholder="请输入内容" @keyup.enter="add">
	<ul class="L0">
		<li v-for="(item,index) in title" :key="index">
			<span class="l1">{{index+1}} .</span>
			<span>{{item.tit}}</span>
			<button class="l2" @click="shchu"></button>
		</li>
		<div id="one">
			<span>{{title.length}} item left</span>
			<button @click="qk">清空</button>
		</div>
	</ul>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data() {
	return {
		title:[{
			tit:'学习'
		},
		{
			tit:'打篮球'
		},
		{
			tit:'下午似乎要下雨'
		}],
		input: '',
	}
  },
  methods: {
  	add(){
		let arr = this.input
		console.log(arr)
		this.title.push({
			num:1,
			tit:arr
		})
		this.input = ''
  	},
	shchu(a){
		this.title.splice(a,1)
	},
	qk(){
		this.title = []
	}
  },
}
</script>
<style scoped>
*{
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.home h1{
	color: #bd5757;
	text-align: center;
}
.el-input{
	width: 24.5%;
	margin: 0 auto;
	height: 40px;
}
.L0{
	width: 25%;
	margin: 0 auto;
	padding: 0;
}
.L0 li{
	border: 1px solid #ccc;
	height: 40px;
	line-height: 40px;
	position: relative;
}
.L0 li span{
	float: left;
}
.L0 li .l1{
	margin-right: 20px;
}
.L0 li .l2{
	display: none;
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-size: 20px;
	color: #cc9a9a;
	transition: color 0.2s ease-out;
	background: #fff;
	border: 1px solid #fff;
	position: absolute;
	right: 0px;
}
.L0 li .l2:hover{
	color:#af5b5e;
}
.L0 li .l2::after{
	content: 'x';
}
.L0 li:hover .l2 {
	display: block;
}
.L0 li .edit {
	display: none;
}
#one{
	height: 40px;
	border: 1px solid #ccc;
	line-height: 40px;
}
#one span{
	float: left;
}
#one button{
	float: right;
	margin-top: 9px;
}
</style>