6. Vue 事件结合双向数据绑定实现todolist

最新推荐文章于 2022-07-07 23:44:12 发布

原创最新推荐文章于 2022-07-07 23:44:12 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

VUE学习专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何使用Vue.js创建一个To-do List应用。利用v-model实现数据双向绑定，v-for进行列表循环，v-if控制元素显示隐藏，并通过自定义方法完成任务项的添加与删除操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   todolist的效果实现需要用到之前几节课学到的只是，首先是数据的双向绑定v-model,循环v-for,事件绑定v-click,还有判断v-if,还有一个keydown方法的应用；

代码实例

<template>
  <div id="app">
   <input type="text" v-model='todol' ref="todo"/>
   <button v-on:click="getdata()">增加</button>
   <br/>
   <br/>
   <br/>
    
   
   <h2 >正在进行中</h2>
  <ul >
    <li  v-for="(item,key) in todolist"  v-if="!item.checked">
     <input type="checkbox" v-model='item.checked'> {{key}}-{{item}}--{{item.checked}}
      <button @click="deldata(key)">删除</button>
     </li>
   </ul>
    
   <br/>
   <br/>
   <br/>
   <h2>已完成</h2>
   <ul >
    <li v-for="(item,key) in todolist" v-if="item.checked">
     <input type="checkbox"  v-model='item.checked'> {{key}}-{{item}} ----{{item.checked}}
     <button @click="deldata(key)">删除</button>
     </li>
   </ul>
   <br/>
   <br/>
  </div>

</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      todol:'',
      todolist:[]
    }
  },methods:{
    getdata(key){
      //alert(this.$refs.todo.value);
      //this.todolist.push(this.$refs.todo.value);
      // console.log(this.$refs.todo);
       
  
     
      this.todolist.push(
        {
          checked:false,
          title:this.todol
        }
      )
     
    },
    deldata(key){
      alert(key);
     
      this.todolist.splice(key,1)

    }
  }
}
</script>

效果图：
在这里插入图片描述