欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

利用Vue框架写一个简单的todolist

程序员文章站 2024-03-04 17:37:47
...

这个todolist使用三个部分:
HTML页面使用了SUI的Moblie的组件
js需要下载vue.js的源文件

HTML部分代码:

<div id="app">
        <!-- 头部结构 -->
        <header class="bar bar-nav">
            <a class="icon icon-star pull-left"></a>
            <a class="icon icon-edit pull-right"
            @click="hide()"
            ></a>
            <h1 class="title">标题</h1>
          </header>
          <!-- 内容区 -->
          <section>
              <input type="text" 
              v-show="!Tflag" 
              v-model="val"
              @keyup.enter="send(val)"
              >//输入生成卡片
            <div class="card"
            v-for="(item,index) in  newTodos"
            >
                <div class="card-content">
                  <div class="card-content-inner">{{item.title}}</div>
                  <button class="button button-danger pull-right"
                  @click="show(index)"
                  >
                      <i class="icon icon-remove"></i>
                  </button>
                  <button class="button button-success pull-right"
                  @click="select(index)"
                  :class="item.Xflag&&'button-fill'"
                  >
                        <i class="icon icon-check"></i>
                    </button>
                </div>
              </div>
          </section>
        <div class="mask"
        @click="Sflag=!Sflag"
        >
                  <div class="mask-bg" 
                  v-show="Sflag"
                  >
                      <div class="mask-content">
                          <p>你确定要抛弃我嘛?</p>
                          <button class="button button-fill button-danger pull-right"
                          @click="del(index)"
                          >抛弃</button>
                      </div>
                  </div>
        </div>
          <!-- 底部结构 -->
          <footer>
            <ul>
                <li v-for="item in btns">
                    <button class="button button-success"
                    :class="['button-'+item.style,type===item.txt&&'button-fill']"
                    @click="type=item.txt"
                    >
                        {{item.txt}}
                    </button>
                    
                </li>
            </ul>
          </footer>
    </div>

css代码:

*{
    margin:0;
    padding:0;
    list-style: none;
}
section{
    padding-top:54px;
}
.card-content{
    overflow: hidden;
    padding:10px;
}
.card-content button{
    margin-left:10px;
}
.mask{
    width: 100%;
    height: 100%;
}
.mask-bg{
    position: fixed;
    top:0;
    left: 0;
    z-index:99;
    width: 100%;
    height: 100%;
    background:rgba(204, 204, 204, 0.582);
}
.mask-content{
    width:80%;
    height: 130px;
    background:white;
    position: absolute;
    left:50%;
    margin-left:-40%;
    top:50%;
    margin-top:-65px;
    z-index: 100;
    border-radius: 10px;
}
.mask-content p{
    padding:10px;
}
.mask-content button{
    margin-right:20px;
    margin-bottom:5px;
}
footer ul{
   display: flex;
   justify-content: space-around;
   position: absolute;
   bottom:20px; 
   width: 100%;

}
footer ul li .button{
    width:80px;
    height: 80px;
    border-radius: 50%;
    line-height: 80px;
    text-align: center;
}

js的Vuejs代码

new Vue({
    el:'#app',
    data:{
        Tflag:true,//输入框的判断
        val:'',
        Xflag:true,//勾选框的判断
        todos:[{//生成的卡片是输入框数组
            id:1,
            title:'任务一',
            Xflag:true,
        },{
            id:2,
            title:'任务二',
            Xflag:true,
        }],
        Sflag:false,//勾选框是否勾中的判断
        btns:[{
            txt:'A',
            Bflag:true,//按钮的判断
            style:'success'
        },{
            txt:'F',
            Bflag:true,
            style:'warning'
        },{
            txt:'U',
            Bflag:true,
            style:'danger'
        }],
        type:"A",
    },
    methods: {
        hide(){//对输入框的隐藏
            this.Tflag=!this.Tflag;
        },
        send(val){//输入框进行生成卡片
            this.todos.push({//利用todos的数据形式,来把数据push进去
                id:this.todos.length+1,
                title:val,
                Xflag:true,
            });
            this.val='';//清空输入框
            this.Tflag=!this.Tflag;//隐藏输入框
        },
        del(index){//弹框的删除
            this.todos.splice(index,1)
        },
        show(index){//直接删除提示,删除根据勾选框进行判断
            if(this.todos[index].Xflag===false){
                this.Sflag=!this.Sflag;
            }else{
                this.todos.splice(index,1)
            }
        },
        select(index){//点击勾选框进行判断是否选中
            this.todos[index].Xflag=!this.todos[index].Xflag;
        }
    },
    computed: {
        
        alltodos(){//点击all按钮返回所有的值
            return this.todos
        },
        finish(){//点击finish按钮返回完成任务的所有值Xflag是勾选框的判断
            return this.todos.filter(item=>item.Xflag&&item)
        },
        unfinish(){
            return this.todos.filter(item=>!item.Xflag&&item)//遍历数组然后返回点击的相应值
        },
        newTodos(){//将原来的todos数据写成可变的,点击下面的按钮可以将每个部分的数据分开
            switch(this.type){
                case "A":
                    return this.alltodos;
                    break;
                case "F":
                    return this.finish;
                    break;
                case "U":
                    return this.unfinish;
                    break;
            }
        },
    },
})