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

最新推荐文章于 2022-11-13 16:36:41 发布

原创最新推荐文章于 2022-11-13 16:36:41 发布 · 542 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一个基于Vue.js框架的To-do List应用实现，详细展示了HTML、CSS和JavaScript代码，包括组件化设计、事件监听、状态管理和响应式UI更新等关键技术点。

这个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;
            }
        },
    },
})