用 Vue 完成一个 TODO 应用的代码实例 - 易塔云建站-模板下载,web开发资源,技术博客

用 Vue 完成一个 TODO 应用的代码实例发布于：2021-04-07 21:25:05 来源：Vue 查看：26 讨论：0

完成TODO应用：

HTML文件为：
<div id="todo-list-example">
   <form v-on:submit.prevent="addNewTodo" method="post">
       <label for="new-todo">Add a todo</label>
       <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat"/>
       <button type="submit">ADD+</button>
   </form>
   <ul>
       <li
           is="todo-item"
           v-for="(entry, index) in items"
           v-bind:key="entry.id"
           v-bind:title="entry.title"
           v-on:remove="items.splice(index, 1)">
       </li>
   </ul>
</div>
<script type="text/javascript">
   Vue.component('todo-item', {
       template: '<li>{{ title }}  <button v-on:click="$emit(\'remove\')">Remove</button></li>',
       props: ['title']
   })
   const vm = new Vue({
       el: '#todo-list-example',
       data: {
           newTodoText: '',
           items: [
               {id: 1, title: 'Do the dishes'},
               {id: 2, title: 'Take out the trash'},
               {id: 3, title: 'Mow the lawn'}
           ],
           nextTodoId: 4
       },
       methods: {
           addNewTodo: function(){
               this.items.push({
                   id: this.nextTodoId++,
                   title: this.newTodoText
               })
               this.newTodoText = ''
           }
       }
   })
</script>

上一篇：React 中组件间通信，父组件向子组件传递数据下一篇：用 Vue 实现一个 currentTab 组件切换

评论

最新文章

热门笔记

可以直接扫码关注本站

易塔云建站：15811355317

微信扫一扫，添加好友