您的位置:首页 > 产品设计 > UI/UE

vue.js 实现 todo list 任务表单

2017-04-17 20:22 716 查看
---------------------------------------

有关点击复选框 未完成数字的变化 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 源码

<!DOCTYPE html>
<html>
<head>

<meta charset='utf-8' />
<title>todo list</title>
<link rel="stylesheet" type="text/css" href="./todo-list.css" />
</head>
<body>
<div id="head">
任务计划列表
</div>
<div id="main">
<div class="name">添加任务</div>
<!-- 添加键盘事件   并将input的value值 用intext获取 -->
<input type="text" v-model='intext' v-on:keyup.enter='addList' />
<!-- 添加隐藏的指令 并给出依据 show show不等于0时展示 -->
<div class="task" v-show="show">
<span><i v-text="num"></i>个任务未完成</span>
<div class="task_type">
<a href="javascript:void(0)">所有任务</a>
<a href="javascript:void(0)">未完成任务</a>
<a href="javascript:void(0)">完成任务</a>
</div>

</div>
<div class="list">
<ul>
<!-- 循环产生li标签及其内部标签   并判断是否有内容 没有则不展示 因为在初始化时会产生一个空标签所以才会判断 以免产生空任务 -->
<li v-for='item in items' v-show='item.text' >
<!-- 动态添加class 当点击选中时添加hidd 目的是显示复选框和删除
input 的选择中状态由 ischecked 的值决定 -->
<div id="box"><input type="checkbox" :class='{hidd:item.isChecked}' v-model='item.isChecked' v-on:click='clickInput(item)'/></div>
<!-- class和前面一样里面包含选中时出现删除线  标签内的内容由text决定 而text由输入内容决定 -->
<span v-on:click='clickselect(item)' :class='{hidd:item.isChecked}' >{{item.text}}</span>
<!-- class相同   添加点击删除函数  并且函数接受当前的item,由于去判断在数组中的索引 确定位置 -->
<a href="javascript:void(0)"  :class='{hidd:item.isChecked}' v-on:click='deletList(item)'>删除</a>
</li>

</ul>
</ul>
</div>
</div>
<script type="text/javascript" src='./vue.js'></script>
<script type="text/javascript" src='./todo-list.js'></script>
</body>
</html>


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

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

       



内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: