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 源码
js 源码
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
-------------------------------------------------------------------
有关点击复选框 未完成数字的变化 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
-------------------------------------------------------------------
相关文章推荐
- vue.js 实现 todo list 任务表单-2
- flask 与 vue.js 2.0 实现 todo list
- vue.js几行实现的简单的todo list
- Vue.js 第一发【 todo list (IMWeb训练营作业)】
- vue.js 学习笔记 制作简单的todo list
- [IMWeb训练营作业]vue实现简单的todo list
- Android学习小Demo(18)Todo List 仿QQ删除任务
- TODO List based 算法、任务分解、任务顺序、分治法
- [李景山php]每天laravel[018]-laravel 中级任务--小白教程----实际操作-创建基础任务 to-do-list 案例 ---准备关系模型
- MVC + Vue.js 初体验(实现表单操作)
- Vue.js实现双向数据绑定(表单自动赋值、表单自动取值)
- [李景山php]每天laravel[023]-laravel 中级任务--小白教程----实际操作-创建基础任务 to-do-list 案例 ---删除数据
- Android学习小Demo(9)一个To Do List的实现
- TODO List - 任务表
- Vue学习完成Todo List网页
- [李景山php]每天laravel[023]-laravel 中级任务--小白教程----实际操作-创建基础任务 to-do-list 案例 ---主页,亲爱的,我回来了!!
- IMweb训练营作业—-Todo List(vue)
- flask, SQLAlchemy, sqlite3 实现 RESTful API 的 todo list, 同时支持form操作
- [李景山php]每天laravel[020]-laravel 中级任务--小白教程----实际操作-创建基础任务 to-do-list 案例 ---视图
- [李景山php]每天laravel[021]-laravel 中级任务--小白教程----实际操作-创建基础任务 to-do-list 案例 ---Task 任务处理控制器