上一張醜圖:git
項目演示地址:http://47.75.195.199/todolist/
源碼地址:https://github.com/chunsenye/...github
<template> <div> <label >今天要作什麼</label> <input type="text" v-model="text"> <input type="button" value="提交" @click="submit"> <ul> <li v-for="(item,index) in todolist" :key="index"> {{index+1}}.{{item}} <input type="button" value='X' @click="deleteT(index)" :key="index"> </li> </ul> </div> </template> <script> export default { name: "HelloWorld", data() { return { msg: "Welcome to Your Vue.js App", todolist: ["code to die", "never mind", "say goodbye"], text:'' }; }, methods: { submit() { this.todolist.push(this.text); this.text=''; }, deleteT(index) { this.todolist.splice(index,1); } } }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul li { padding: 10px; font-size: 26px; list-style: none; } a { color: #42b983; } </style>