Vue小项目——标签记录器
功能：用户在文本框里输入文本，按回车键，文本添加到信息栏里，并清空文本框里的内容，最左侧有信息编号，下方有所以信息条数，每条信息右测有删除叉，最下方有全部清空按钮，当信息全部清空，最下方一栏将隐藏。
<!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>
