<div id="todo-list-example"> <form v-on:submit.prevent="addNewTodo"> <label for="new-todo">Add a todo</label> <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat" > <button>Add</button> </form> <ul> <li is="todo-item" v-for="(todo, index) in todos" v-bind:key="todo.id" v-bind:title="todo.title" v-on:remove="todos.splice(index, 1)" ></li> </ul> </div>
在刚开始看这个例子的时候,看到
<form v-on:submit.prevent="addNewTodo">
这句代码的时候就在找submit事件在那里触发,后来发现button如果不设置type的话,默认就是submit。可以参考MDN上的知识
另外form 上的for属性是为了提高form的可用性,将其设置与后边input框的id属性相同时,当你点击label,也会自动给予input框焦点。
原文:https://www.cnblogs.com/joker-18/p/13125651.html