学完了前面的内容,已经足够做点小东西了,今天来做个ToList,别看这个联系小,但是它包囊的知识是很多的,用来做练习很不错的。
既然是做项目那么就要按步骤来!
1.ToDolist的功能
类似于备忘录的功能,记录将来要做的事,功能演示:
2.实现过程
(1).布局:布局打算使用SUI 框架头部布局(SUI)
- 引入SUI的CSS文件js文件和Vue.js的源文件
<link rel="stylesheet" href="https://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"> <script type='text/javascript' src='https://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script> <script type='text/javascript' src='https://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script> <script src="../../../basic-source/vue.js"></script>//放底部
基本布局(外部Vue.js容器,再是SUI容器)
<div id="app"> <div class="page-group"> <div class="page page-current"> </div> </div> </div>
- 结构布局用SUI框架里的组件
(2).功能实现
卡片里带√的按钮的样式切换
思路:
- 单向数据绑定,根据布尔值来判断是否添加这个带有填充色的class
- click事件里改变布尔值来达到切换的目的
<button class="button button-success" @click="item.flag = !item.flag" :class="{'button-fill' : item.flag}" > //data中flag是一个布尔值
点击右上角的笔(编辑),就出来一个弹窗,提示你输入你的待办事项
思路:
- 按钮上写click事件,改变布尔值
- 弹窗上单向绑定数据,一个布尔值
<a class="icon icon-edit pull-right" @click="modalflag=!modalflag" ></a>
<div v-show="modalflag" class="modal modal-in"> <div class="modal-inner"> <div class="modal-text">请输入您的代办事项?</div> <input type="text" class="modal-text-input" v-model="task" > </div> <div class="modal-buttons "> <span class="modal-button" @click="modalflag=false" >取消</span> <span class="modal-button modal-button-bold" @click="addtodo" >确定</span> </div> </div>
点击确定按钮,添加一条数据
点击取消按钮,关闭该弹窗
点击确定按钮添加数据的实现,取消按钮关闭
addtodo(){ this.todo.push({ id:this.todo.length+1, text:this.task, flag:false }); this.modalflag=false; }
取消按钮直接改变布尔值让其隐藏就好
<div class="modal-buttons "> <span class="modal-button" @click="modalflag=false" >取消</span> <span class="modal-button modal-button-bold" @click="addtodo" >确定</span> </div>
任务删除
要求1:任务已经完成的,可以直接删除
要求2:任务没完成的,要弹出提示信息,再确定了才能删除
<button class="button button-danger" @click="check(index)" > <span class="icon icon-remove"></span> </button>
removetodo(index){ this.todo.splice(index,1); this.removeflag=false; // console.log(this.todo[index]) }, check(index){ if(this.todo[index].flag){ //完成的----删除 this.removetodo(index) }else{ //未完成---弹出提示框 this.removeflag=true; //保存index的值,让删除可以正常进行 this.activeindex=index; } }
我们要想知道任务是否完成,就是在判断每个任务数据中的布尔值,为true就是完成了,反之,因为弹出层的结构不在卡片(card)中,所以我们要用变量activeindex存住index的值来删除
底部按钮用循环生成,但是类名不同,点击后的类名也不同
点击前的类名我们在:class里做拼接,数据中带上必要的参数,点击后的用三目运算判断布尔值
<li v-for="item in btnlist"> <button class="button" :class="['button-' + item.className,item.text===type?'button-fill':'']" @click="type=item.text" > {{ item.text }} </button> </li>
因为data数据中带上了:
btnlist:[ { id:1, text:'A', className:'success' }, { id:2, text:'F', className:'primary' }, { id:3, text:'U', className:'danger' } ]
将当前点击的li的text赋值给了type,然后在进行三目判断,为true添加填充色,其他的li标签的三目中自然为false
将数据进行分类
A:所有的任务,包括完成的,未完成的
F:完成的任务
U:未完成的任务
下方的按钮,我点击不同的需要渲染的数据就不一样
例如:我点击了F那么要的只有完成了的数据,所以我渲染的只有完成了的任务的数据
特点:有逻辑,要想数据向变量一样使用
参考:计算属性
computed:{ finished(){ return this.todo.filter((elm,i)=>{ return elm.flag?elm:null; }) }, unfinished(){ return this.todo.filter((elm,i)=>{ return !elm.flag?elm:null }) }, newtodo(){ switch (this.type) { case 'A': return this.todo; break; case 'F': return this.finished; default: return this.unfinished; break; } } }
相应的:循环体的代码
v-for="(item,index) in newtodo"
这里的newtodo就是随时变化的,就像一个变量一样
整个的就都完成了
