vue小项目标签记录器">Vue小项目——标签记录器
功能：用户在文本框里输入文本，按回车键，文本添加到信息栏里，并清空文本框里的内容，最左侧有信息编号，下方有所以信息条数，每条信息右测有删除叉，最下方有全部清空按钮，当信息全部清空，最下方一栏将隐藏。
html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js" integrity="sha384-t1tHLsbM7bYMJCXlhr0//00jSs7ZhsAhxgm191xFsyzvieTMCbUWKMhFg9I6ci8q" crossorigin="anonymous"></script>
<style>
body{
padding:0;
margin: 0;
}
.divcenter{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 500px;
height: 50%;
}
p{
border: solid 1px;
margin: 0px;
padding: 0px;
}
.spanX{
float:right;
margin-right: 10px;
width: 10px;
}
span{
cursor: pointer;
}
h2{
text-align: center;
}
</style>
</head>
<body>
<div id="app" class="divcenter">
<h2>标签记录器</h2>
<div>
<input type="text" placeholder="请输入相应信息后按回车键！" v-model="text" @keyup.Enter="info" style="width: 100%;height: 40px;">
</div>
<div>
<p v-for="(list,index) in arr">
<span style="background-color: blanchedalmond;"> {{index+1}} </span> {{list}}
<span class="spanX" @click="del(index)">x</span>
</p>
<div style="border: solid 1px;" v-show="arr.length!=0">
<span>总数：{{arr.length}}</span>
<span style="float: right;" @click="delAll">Clear</span>
</div>
</div>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
arr:[],
text:"",
},
methods:{
info:function(){
this.arr.push(this.text);
this.text="";
},
del:function(index){
this.arr.splice(index,1);
} ,
delAll:function(){
this.arr=[];
}
}
})
</script>
</body>
</html>
