首页>>表单>>js实现vue创建事项清单表单代码(2020-05-06)

js实现vue创建事项清单表单代码

js实现vue创建事项清单表单代码
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <main id="todolist">  
  2.   <h1>  
  3.     事项清单  
  4.     <span>把事情完成，每次一个项目。</span>  
  5.   </h1>  
  6.   
  7.   <template v-if="todo.length">  
  8.     <ul>  
  9.       <li v-for="item in todoByStatus" stagger="5000" v-bind:class="item.done ? 'done' : ''">  
  10.         <span class="label">{{item.label}}</span>  
  11.         <div class="actions">  
  12.           <button class="btn-picto" type="button" v-on:click="markAsDoneOrUndone(item)" v-bind:aria-label="item.done ? 'Undone' : 'Done'" v-bind:title="item.done ? 'Undone' : 'Done'">  
  13.             <i aria-hidden="true" class="material-icons">{{ item.done ? 'check_box' : 'check_box_outline_blank' }}</i>  
  14.           </button>  
  15.           <button class="btn-picto" type="button" v-on:click="deleteItemFromList(item)" aria-label="Delete" title="Delete">  
  16.             <i aria-hidden="true" class="material-icons">删除</i>  
  17.           </button>  
  18.         </div>  
  19.       </li>  
  20.     </ul>  
  21.     <togglebutton   
  22.                   label="在最后移动完成的项目？"  
  23.                   name="todosort"  
  24.                   v-on:clicked="clickontoogle" />  
  25.   </template>  
  26.   <p v-else class="emptylist"> 你的待办事项列表是空的。 </p>  
  27.   
  28.   <form name="newform" v-on:submit.prevent="addItem">  
  29.     <label for="newitem">添加到待办事项列表</label>  
  30.     <input type="text" name="newitem" id="newitem" v-model="newitem">  
  31.     <button type="submit">添加项目</button>  
  32.   </form>  
  33. </main>  

 


原文地址:http://www.freejs.net/article_biaodan_858.html