<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todoList-Vue</title> <script src="../common/vue.js"></script> <script src="../common/jquery-3.1.1.js"></script> <style> table{ margin-top: 20px; } table,table tr th, table tr td { border:1px solid #0094ff; } table { width: 400px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;} tr td:last-child:hover{ cursor: pointer; } </style> </head> <body> <div id="todo-list-example"> <input v-model="newTodoText" v-on:keyup.enter="addNewTodo" placeholder="Add a todo"> <table> <tr v-for="(todo, index) in todos" v-bind:key="todo.id"> <td>{{ index+1 }}</td><td>{{ todo.title }}</td><td><span v-on:click="remove">X</span></td> </tr> </table> </div> </body> <script type="text/javascript"> var vm = new Vue({ el: '#todo-list-example', data: { newTodoText: '', todos:'', nextTodoId: 4 }, methods: { addNewTodo: function () { this.todos.push({ id: this.nextTodoId++, title: this.newTodoText }) this.newTodoText = '' }, remove:function(){ this.todos.splice(this, 1) } } }) $.ajax({ url:'../json/todolist.json', type:'get', dataType:'json', success: function (ajax) { vm.todos=ajax.data; } }); </script> </html>json部分:{ "code": 200, "data": [ { "title":"test1", "id":1 }, { "title":"test2", "id":2 }, { "title":"test3", "id":3 } ] }
Vue 增删示例
最新推荐文章于 2022-10-10 17:37:02 发布