<html> <head> <title>project</title> <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> </head> <body> <nav class="navbar navbar-default navbar-static-"> <div class="container" id="app"> <div class="row"> <div class="clo-md-4 clo-md-offset-2"> <div class="panel panel-default"> <div class="panel-heading">Welcome Vue js 2.0</div> <div class="panel-body"> <h1>my todos</h1> <ul class="list-group"> <li class="list-group-item" v-for="(todo,index) in todos">{{todo.title}} <button class="btn btn-warning btn-xs pull-right" v-on:click="deleteTodo(index)">Delete</button> </li> </ul> <form v-on:submit.prevent="addTodo(newTodo)"> <div class="form-group"> <input type="text" v-model="newTodo.title" class="form-control" placeholder="Add a new todo"> </div> <div class="from-group"> <button class="btn btn-success" type="submit">Add todo</button> </div> </form> </div> </div> </div> </div> </div> </nav> </body> <script src="vue.js"></script> <script> new Vue({ el:'#app', data:{ message:'hello world', //数组 todos:[{id:1,title:'go to school'}], newTodo:{id:null,title:''} }, methods:{ addTodo(newTodo){ this.todos.push(newTodo) this.newTodo={id:null,title:''} }, deleteTodo(index){ // this.todos.$remove(todo) 删除 this.todos.splice(index,1) } } }) /* v-on:submit.prevent 的 prevent 是阻止默认提交事件; addTodo(newTodo){} 等同 addtodo:function(){}; this.todos.push(newTodo) 将newTodo添加到todos里 this.newTodo={id:null,title:''} 添加完成后input里为空 */ </script> </html>