<div id="app">
    <ul>
        <li v-for="(todo,index) in todos">@{{todo.title}} {{--将todos内容循环输出，以todo和index--}}
            <button @click="deleteTodo(index)">delete</button>
        </li>
    </ul>

    <form  @submit.prevent="addTodo(newTodo)"> {{--@=v-on:  prevent表示阻止提交--}}
        <input type="text" v-model="newTodo.title"> {{--双向绑定data.newTodo.title--}}
        <button value="submit">add</button>
    </form>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            todos:[{id:1,title:1},{id:2,title:2}],
            newTodo:{id:null,title:''}
        },
        methods:{
            addTodo(newTodo){
        this.todos.push(newTodo)
        this.newTodo={id:null,title:''}//重置输入框内容为空
    },
    deleteTodo(index){
        this.todos.splice(index,1)},
    },
    })
</script>