蓝桥web模拟赛：时间管理大师
生活随笔
收集整理的這篇文章主要介紹了
蓝桥web模拟赛：时间管理大师
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 時間管理大師
- 目標：
- 題目功能羅列：
- vue大體結構
- 1. 添加事件、頁面數據和事件綁定
- 2. 事件實現
- 3. 完善統計和顯示功能
- 完整的關鍵代碼
時間管理大師
目標：
請在index . html文件中使用默認提供的DOM結構(即基礎項目提供的DOM結構和指定id不能
改變)，并用 Vue 2.x語法實現任務管理器功能。
具體需求如下:
頁面加載后默認顯示“ 暫無數據”。
在輸入框中輸入內容并點擊“確認” 按鈕后，將輸入內容添加到任務列表。
新增任務添加在已有任務后面。
點擊每條任務右側的“刪除”圖標該任務會從任務列表中移除。
底部“總數”右側顯示當前任務列表中的數量。
點擊底部的“清除” 將清空任務列表中的數據，任務列表處恢復“暫無數據” 的默認顯示。
最終效果[請通過瀏覽器查看素材文件夾中的【effect.gif 】
題目功能羅列：
事件的話，除了點擊，還有一個鍵盤回車事件，雖然文檔沒說明，但是演示有因此我們就加。
vue大體結構
var top = new Vue({el: "#box",// 在此處補全代碼，實現所需功能data:{newEvent:'',eventList:[]},methods:{clean(){},del(index){},add(){},}});newEvent用于記錄輸入框的內容，eventList保存事件列表
1. 添加事件、頁面數據和事件綁定
<div id="box"><div class="head"><h2>Todos</h2><p>羅列日常計劃，做一個時間管理大師！</p><div class="input" ><span>內容</span><!-- @keyup.enter 監聽鍵盤回車事件 --><input type="text" @keyup.enter="add" v-model="newEvent" placeholder="請輸入你要做的事" /><span id="add" @click="add">確認</span></div></div><ul class="list"><li v-if="eventList.length == 0">暫無數據</li><li v-for="(item,index) in eventList" :key="index"><!-- 前面的序號 --><span class="xh">{{index+1}}</span><!-- 列表內容 --><span>{{item}}</span><!-- 刪除按鈕 --><span class="qc" @click="del(index)"></span></li><li v-if="eventList.length >= 1"><b> 總數：{{eventList.length}} </b><b id="clear" @click="clean">清除</b></li></ul></div>2. 事件實現
var top = new Vue({el: "#box",// 在此處補全代碼，實現所需功能data:{newEvent:'',eventList:[]},methods:{clean(){this.eventList = []},del(index){this.eventList.splice(index,1)},add(){this.eventList.push(this.newEvent)this.newEvent = ''},} });刪除功能的話直接通過數組函數aplice(索引,刪除元素個數)來刪除事件。遍歷的時候把索引帶上
清空的話簡單，直接把元素初始化即可。
3. 完善統計和顯示功能
統計的話有三個部分了：
完整的關鍵代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>任務管理器</title><link type="text/css" href="css/style.css" rel="stylesheet" /></head><body><div id="box"><div class="head"><h2>Todos</h2><p>羅列日常計劃，做一個時間管理大師！</p><div class="input" ><span>內容</span><input type="text" @keyup.enter="add" v-model="newEvent" placeholder="請輸入你要做的事" /><span id="add" @click="add">確認</span></div></div><ul class="list"><li v-if="eventList.length == 0">暫無數據</li><li v-for="(item,index) in eventList" :key="index"><!-- 前面的序號 --><span class="xh">{{index+1}}</span><!-- 列表內容 --><span>{{item}}</span><!-- 刪除按鈕 --><span class="qc" @click="del(index)"></span></li><li v-if="eventList.length >= 1"><b> 總數：{{eventList.length}} </b><b id="clear" @click="clean">清除</b></li></ul></div><script src="js/vue.js"></script><script>var top = new Vue({el: "#box",// 在此處補全代碼，實現所需功能data:{newEvent:'',eventList:[]},methods:{clean(){this.eventList = []},del(index){this.eventList.splice(index,1)},add(){this.eventList.push(this.newEvent)this.newEvent = ''},}});</script></body> </html>總結
以上是生活随笔為你收集整理的蓝桥web模拟赛：时间管理大师的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： after meet KeyNi liu
- 下一篇： 计算机专业夏令营英语面试范文,夏令营英语