学完了前面的内容,已经足够做点小东西了,今天来做个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).功能实现

卡片里带√的按钮的样式切换

思路:

1. 单向数据绑定,根据布尔值来判断是否添加这个带有填充色的class
2. click事件里改变布尔值来达到切换的目的

<button 
class="button button-success"
@click="item.flag = !item.flag"
:class="{'button-fill' : item.flag}"
>
//data中flag是一个布尔值

点击右上角的笔(编辑),就出来一个弹窗,提示你输入你的待办事项

思路:

1. 按钮上写click事件,改变布尔值
2. 弹窗上单向绑定数据,一个布尔值

 <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就是随时变化的,就像一个变量一样

整个的就都完成了

cs