Vue入门练习TodoList

最新推荐文章于 2023-06-21 17:09:28 发布

webLi@2019

最新推荐文章于 2023-06-21 17:09:28 发布

阅读量396

点赞数 1

分类专栏： Vue 文章标签： todolist vue实现简单的todolist

本文链接：https://blog.csdn.net/helloHCjs/article/details/88718949

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这两天一直在看Vue，所以打算写个小demo来更快的适应数据驱动视图的这种模式，毫无疑问，TodoList是最经典最棒的一个小项目，先从最简单的部分开始。

首先需要梳理一下它的思路。大致是由三部分组成:

表单及提交表单内容的按钮
展示的任务列表
未完成，已完成、总任务的实时展示数目

先把基本的结构写出来

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Todolist</title>
        <style>
            
        </style>
    </head>
    <body>
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
		
        <div id="app">
            
          <input type="text" v-model="value" @keyup.enter="add">
                <!-- value即为用户在表单内输入的任务内容，并设置按下enter键指向add方法 -->
        
          <button @click="add">添加</button>
                <!-- 设置点击按钮的响应事件 -->
 
            <ul>
                <li v-for="(item,index) in items" :key="index">{{ item.message }}
                     <!-- 通过v-for指令来遍历用户输入的列表项并进行渲染 -->
                    <input type="checkbox" v-bind="finished">
                    <!-- 设置多选框，finished= true 的时候用来显示已完成的任务，为false则反之 -->
                <li>
            </ul>
 
	</div>
 
		<script type="text/javascript">
			
			var vm = new Vue({
				
				el:'#app',
				data() {
				   return {
					value: "",
					//初始化表单内容
					finished: "",
					//初始化变量finished
					items: [] ,
					//初始化数组列表项
				  }
				},
				methods:{
				  add(){
					//定义add方法
					alert(this.value)
				  }
                }
			})
			
		</script>
    </body>
</html>

结构已经出来了，然后再一一实现功能

增加功能：点击添加按钮获取用户输入的任务，并渲染到列表。

add () {
    this.items.push(
      {
          message: this.value,
          finished:false
          //增加 利用items数组的push()方法，将用户输入的内容添加进来即可.并且每次添加的finished属性对应的值都是false
      }
    )
     this.value = ""
          // 点击完按钮获取内容后，清空表单。方便下次直接输入
}

如图：

增加功能完成，再来添加删除功能

删除功能同样是利用数组的splice()方法，先回忆一下这个方法，他的第一个参数一般为要操作项目对应的数组下标，第二个参数为删除的数量，例如splice（2,0）表示什么也不做，splice(2,1 )表示删除一个数组下标为2的内容，splice（2，,2）表示从数组下标2对应的内容开始，删除两个，即删除下标为2 和下标为3的所对应的内容，splice还可以传第三个参数，即表示向数组中添加的内容，例如splice(2,0,' Mary ' )表示在在下标为2的地方添加一个" Mary"的项目，再例如，splice（2,1，" Mary"）表示删除一个下标为2的项目，并用'Mary'替代它。所以这个方法的功能还是挺强大的。继续实现删除功能

html部分：

<ul>
   <li v-for="(item,index) in items" :key="index">{{ item.message }}
	<a href="javascript:;" @click="del(index)">删除</a>
        <!--添加删除按钮 这里我用的a标签 看起来更直观  -->
        
        <!-- 通过v-for指令来遍历用户输入的列表项并进行渲染 -->
        <input type="checkbox" v-bind="Finished">
           <!-- 设置多选框，isFinished= true 的时候用来显示已完成的任务，为false则反之 -->
   </li>
</ul>

js部分：


del(index){
    
   this.items.splice(index,1)
    //index表示相对应的li列表下标，并只删除一个
},

这样删除功能也完成了。

剩余的响应式数据就简单了，首先，所有任务：它对应的就是 this.items.length ; 重要的是去监听已经完成的，这时候需要用到数组的一个方法filter()方法。看一下关于mdn对filter的说明：

filter()方法里面应该是一个回调函数，并且这个回调函数可以选择性的传三个参数，不太清楚的可以自行了解一下filter()方法。

已经完成的，意思就是finished == true 的列表项，这个时候利用filter筛选并返回 finished == true 列表项的长度就是完成的数量。

   //监听事件
computed:{
    
    finished:function(){
		return this.items.filter(function(e){
				return e.finished
		}).length
	},
    // 返回已经完成的数量

    unFinished:function(){
			return this.items.length - this.finished
	}
    //这个时候未完成的数量也可以得到了

}

最后完善一下样式。

因为是使用模块化组件写的，所以对源码有兴趣的可以去我个人Github上下载，或者留言你的邮箱，我私发给你。

如果有不同之处，还希望多多指点。

webLi@2019

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue入门练习TodoList

这两天一直在看Vue，所以打算写个小demo来更快的适应数据驱动视图的这种模式，毫无疑问，TodoList是最经典最棒的一个小项目，先从最简单的部分开始。首先需要梳理一下它的思路。大致是由三部分组成:表单及提交表单内容的按钮展示的任务列表未完成，已完成、总任务的实时展示数目先把基本的结构写出来<!doctype html>&...
复制链接

扫一扫