<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> #app { margin: 0px auto; width: 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; width: 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根據條件進行顯示記錄數和清空按鈕。