<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> #app { margin: 0px auto; 500px; border: 1px solid blue; height: 500px; } .title { line-height: 50px; text-align: center; height: 50px; font-weight: 20px; font-size: 36px; background: coral; } .inp { outline-style: none; border: 0px solid #ccc; 330px; font-size: 15px; padding: 3px 3px; font-family: "Microsoft soft"; } input:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6) } ul, li { padding: 0; margin: 0; list-style: none; } .li-div { text-align: center; border: 3px solid white; } </style> </head> <body> <div id="app"> <div class="title"> 记事本 </div> <hr> <div> <span> <p style="color: chartreuse">请输入内容： <input type="text" placeholder="按回车保存" class="inp" v-model="tmp" @keyup.enter="add"> </p> </span> </div> <hr> <div class="content"> <ul> <li v-for="(item, index) in message"> <div class="li-div"> <span>{{index}}</span> <label>{{item}}</label> <button @click="remove(index)">删除</button> </div> </li> </ul> </div> <hr> <div v-show="message.length>0"> <div style="float: left;"> 当前记事本记录数：{{message.length}} </div> <div style="float: right;;"> <button @click="clear">清空</button> </div> </div> </div> <script> var app = new Vue({ el: '#app', data: { tmp: "", message: ['今天好开心', '今天超级棒', '今天美美哒'], }, methods: { add: function () { if (this.tmp == null || this.tmp == "") { alert("输入不能为空"); } else { this.message.push(this.tmp); } }, remove: function (ind) { var flag = confirm("是否要删除删除" + ind); if (flag == true) { this.message.splice(ind, 1); } }, clear: function () { this.message = []; }, }, }) </script> </body> </html>
效果：
在输入框中输入内容并回车：
删除编号为1的数据：
清空记事本：
说明：综合使用了vue.js的多个指令，包括：
使用v-for来显示列表数据。
使用v-on来进行删除和清空操作。
使用v-on进行新增操作，具体是keyup.enter事件。
使用v-model将文本框中的数据和vue-data中的数据进行绑定。
使用v-show根据条件进行显示记录数和清空按钮。