Vue基礎---記事本實現
阿新 • • 發佈:2020-12-19
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html"; charset="UTF-8"> <meta name="robots" content="noindex, nofollow"/> <meta name="googlebot" content="noindex, nofollow"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="./css/index.css"/> <title>記事本</title> </head> <body> <!--主體區域--> <section id="todoapp"> <!--輸入框--> <header class="header"> <h1>記事本</h1> <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="請輸入任務" class="new-todo"/> </header> <!--列表區域--> <section class="main"> <ul class="todo-list"> <li class="todo" v-for="(item,index) in list"> <div class="view"> <span class="index">{{index+1}}.</span> <label>{{ item }}</label> <button class="destroy" @click="remove(index)"></button> </div> </li> </ul> </section> <!--統計和清空--> <footer class="footer"> <span class="todp-count" v-if="list.length!=0"> <strong>{{list.length}}</strong> items left</span> <button v-show="list.length!=0" class="clear-completed" @click="clear"> Clear</button> </footer> </section> <!--底部--> <footer class="info"></footer> <!-- 開發環境版本,包含了有幫助的命令列警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#todoapp", data:{ list:["寫程式碼","吃飯","睡覺"], inputValue:"好好學習,天天向上" }, methods:{ add:function(){ this.list.push(this.inputValue); }, remove:function(index){ this.list.splice(index,1); }, clear:function(){ this.list = []; } } }) </script> </body> </html>