vue.js_vue.js_其他_其他下载-pudn.com

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <link rel="stylesheet" href="./css/style.css" /> <title></title> </head> <body> <div id="app"> <article class="wrap" rel='nofollow' onclick='return false;'> <section class="todo-form"> <input type="text" name="todo-text" class="input-text" placeholder="please input todo" :value="text" @input="inputText" /> <button class="add-button" @click="addTodo" >ADD TODO</button> </section> <section class="list-area"> <div class="area-incomplete"> <p class="todo-title">未達成</p> <ul class="todo-area"> <li v-for="(item, i) in incompleteTodo" :key="i" class="list" > <span class="list-label">{{item.text}}</span> <span class="button-area"> <button class="list-button button-done" @click="toggleIsDone(item.id)" >DONE</button> <button class="list-button button-delete" @click="deleteTodo(item.id)" >DELETE</button> </span> </li> </ul> </div> <div class="area-complete"> <p class="todo-title">達成</p> <ul class="todo-area"> <li v-for="(item, i) in doneTodo" :key="i" class="list" > <span class="list-label">{{item.text}}</span> <span class="button-area"> <button class="list-button" @click="toggleIsDone(item.id)" >RETURN</button> <button class="list-button button-delete" @click="deleteTodo(item.id)" >DELETE</button> </span> </li> </ul> </div> </section> </article> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="./script/script.js"></script> </body> </html>