vue.js 实现 todo list 任务表单

来源：互联网发布：java库函数查询工具编辑：程序博客网时间：2024/06/11 23:30

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

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

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

0 0