首页 > 其他 > 详细

Vue 官网文档 todolist的一些想法

时间:2020-06-14 18:17:51      阅读:55      评论:0      收藏:0      [点我收藏+]
<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框焦点。

 

Vue 官网文档 todolist的一些想法

原文:https://www.cnblogs.com/joker-18/p/13125651.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!