vue.js 实现 todo list 任务表单

---------------------------------------

有关点击复选框 未完成数字的变化 bug 已经修复   

  添加

 clickInput: function(lsi){

        var om = this.items.indexOf(lsi);       //获取相应的索引值
         if(this.items[om].isChecked)
               {                             //如果选中未完成任务减一 否则加一

            this.num =  this.num-1;    
               }
               else
               {
                   this.num =  this.num+1;
               }
     },

-----------------------------------------

今天在腾讯课堂学习关于用vue.js 制作todo list 任务表单   然后自己写了一遍，用来加强记忆和总结

-------------------------------------------------------------

如果有错误 望指正 ps;反正我运行时没有错误

部分功能还未实现   后续将添加

----------------------------------------------------------

html 源码

	
	
	
	


     

     	  任务计划列表
     
    
     

     	  
添加任务
     	  
     	  
     	  
     	  

     	      个任务未完成
     	      

     	      	所有任务
     	  	    未完成任务
     	  	    完成任务
     	      
     	  	  
     	  
     	  

     	  	   

     	  	      
     	  	   	   

     	  	   	    
     	  	   	   	  

     	  	   	   	  
     	  	   	   	  {
    {item.text}}
     	  	   	   	  
     	  	   	   	  删除
     	  	   	   
     	  	   	   
     	  	   
     	  	   
     	  
     
     
     

js 源码

// 实例化


var main = new Vue({
    el:"#main",
    
    data:{
    	items:[
    		 {text:null , isChecked:false },   // ischecked 判断是否被选中
    	],
    	intext:'请输入任务',
       
        show: 0,    // 添加判断是否展示输入框下的任务栏依据 初始为0 不展示 
        num: 0,         //  判断未完成的任务数量 初始为0 即没有添加任何任务时
    },

    methods:{
    	 // 添加任务函数
    	addList: function(){
              console.log(this.intext);
              console.log(this.items[0].text);
              if(this.intext.length!=0)      // 判断输入框是否有输入内容
              {
              	this.items.push({          
              	 		text: this.intext,  // 将输入内容添加到 items.text内
              	 		isChecked:false,     // 使刚输入的未被选中 （注意即使不添加这句也会不选中
              	 		                      // 但是数组items内相应位置就不会出现ischecked 会使后面需要选中时出现问题）
              	 		
              			});
              	this.show = this.show+1;    //每添加一个任务 任务的总个数加一
              	this.num =  this.num+1;      // 每添加一个任务 未完成任务的总个数加一
              }
              
              // 清空输入框内容
              this.intext = '';  
    	},
    	// 点击文字选中复选框
    	clickselect:function(lsi){
    		   console.log(this.items.indexOf(lsi));
    		   var om = this.items.indexOf(lsi);       //获取相应的索引值
    		   this.items[om].isChecked = !this.items[om].isChecked;  // 当点击相应任务时
    		   														// 选择的状态发生改变
               if(this.items[om].isChecked)
               {                             //如果选中未完成任务减一 否则加一

    		      this.num =  this.num-1;     
               }
               else
               {
               	   this.num =  this.num+1; 
               }
    	},

clickInput: function(lsi){                     //添加点击input标签时 num 也变化

        var om = this.items.indexOf(lsi);       //获取相应的索引值
         if(this.items[om].isChecked)
               {                             //如果选中未完成任务减一 否则加一

            this.num =  this.num-1;     
               }
               else
               {
                   this.num =  this.num+1; 
               }
     },
    	// 点击删除
    	deletList: function(lsi){
    		  var om = this.items.indexOf(lsi);
    		  // this.items[om].text=''; //这样并没有完全从数组清除
              
              // 当点击删除时 未完成任务数量变化
              // 变化依据任务是否已经被选中而变化
              // 不能将移出数组先执行 这样就会导致无法判断是否之前已经被选中
              if( this.items[om].isChecked == true)   
              {
              	this.num =  this.num;
              }
              else
              {
              	this.num =  this.num-1;
              }
              this.show= this.show-1;     // 任务总数减一  如果总数等于0时 隐藏
    		  this.items.splice(om,1);     // 移出相应任务

    	}
    }


})

css 源码

body{padding: 0;margin:0; font-size: 14px; font-family: '微软雅黑';}
ul,li,a,div,input,span {padding: 0; margin:0;}
a{text-decoration: none; color: #000;}
ul,li {list-style-type: none;}
/*顶部布局*/
#head {
		width: 100%;
		height: 50px;
		font-size: 18px;
		font-weight: bold;
		line-height: 50px;
		text-align: center; }

#main {
	   width: 400px;
	   margin:5px auto;

}
#main .name {
	    font-size: 16px;
	    font-weight: bold;
}
#main input {
	   width: 400px;
	   height: 35px;
       outline: none;
}
#main .task{
	  margin:10px 0;
	  height: 32px;
	  overflow: hidden;
	  line-height: 32px;
}
#main .task span {
	 display: block;
	 height: 30px;
	 float: left;
}
#main .task  .task_type{
	 float: right;
}
#main .task  .task_type a{
		display: block; 
		height: 30px; 
		padding: 0 5px;
		line-height: 30px; 
		border:1px solid #ccc;
		text-decoration: center;
		float: left;
		margin-left: 10px;
	    }
#main .list {
	   width: 400px;

	   clear: both;
}
#main .list ul{
	  width: 400px;
}
#main .list ul li {
	  width: 400px;
	  height: 30px;
	  line-height: 30px;
	  display: block;
	  overflow: hidden;
}
#main .list ul li #box {
	 float: left;
	 width: 16px;
	 height:16px;
	 margin:7px 0;
}
#main .list ul li input{
	 display: none;
	
	 width: 16px;
	 height:16px;
	


}
#main .list ul li:hover a{
     display: block;
}
#main .list ul li:hover input{
     display: block;
}
#main .list ul li .hidd {
	display: block;
	color: #ccc;
	text-decoration: line-through;
}
#main .list ul li span {
	 display: block;
	 float: left;
	 margin-left: 20px;

}

#main .list ul li a{

	 display: none;
	 float: left;
	 margin-left: 20px;
}

下面是我运行的界面

 刚进入界面

添加第一个任务

   

鼠标悬停

        

单击选中

        

单击删除

-----------------------------------------------------------------

原谅我还不太会用csdn

-------------------------------------------------------------------