Vue 增删示例

来源：互联网发布：盐城java软件培训编辑：程序博客网时间：2024/04/28 17:52
<!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    }  ]}
阅读全文
0 0