利用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;
}
},
},
})