vue简单todolist制作
2019-05-27 20:16
337 查看
html页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet" href="./index.css">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<div class="page-group">
<div class="page page-current">
<!-- header -- start -->
<header class="bar bar-nav">
<a class="icon icon-star pull-left"></a>
<a class="icon icon-edit pull-right" @click="add_todo_flag=!add_todo_flag"></a><!-- 控制input框的出现与消失 -->
<h1 class="title">todo_list</h1>
</header>
<!-- header -- end -->
<!-- content -- start -->
<div class="content">
<input
type="text"
v-show="add_todo_flag"
v-model = "add_todo_input"
@focus="getFocus"
@keyup.enter="addTodoItem"
><!-- 控制input框的出现消失，双向数据绑定，框内信息，按下回车键push方法向数组添加数据渲染界面 -->
<div
class="card"
v-for = "(todo,index) in newTodos"
:key = "todo.id"><!-- 根据不同的选项渲染不同的界面 -->
<div class="card-content">
<div class="card-content-inner">{{ todo.task }}</div>
<div class="my-btn-box pull-right">
<button
class="button button-success"
@click = "todo.flag = !todo.flag"
:class="[todo.flag?'button-fill':'']"
><!-- flag控制是否打钩 -->
<i class="icon icon-check"></i>
</button>
<button class="button button-danger"
@click = "check( index )"><!-- 判断是否打钩，打钩直接删除，没打勾弹出选项框 -->
<i class="icon icon-remove"></i>
</button>
</div>
</div>
</div>
</div>
<!-- content -- end -->
<!-- footer --start -->
<footer>
<ul>
<li class="circle"
v-for="btn in btns"
:key="btn.id"
:class="['circle-'+btn.mold,btn.name===type?'circle-fill':'']"
@click="type=btn.name">{{btn.content}}</li><!-- 根据type改变来使点击的和不点击的产生不同效果 -->
</ul>
</footer>
<!-- footer --end -->
<!-- mask --start -->
<div class="mask-box"
v-show = "mask_flag"
@click = "mask_flag = false"
><!-- mask_flag控制是否出现黑幕 -->
<div class="mask-box-bg"></div>
<div class="card">
<div class="card-content">
<div class="card-content-inner">您确定要删除？？</div>
<div class="my-btn-box pull-right">
<button class="button button-warning button-fill"
@click = "remove( active_index )"><!-- 因为处于for循环之外，取不到index值，所以用active_index存下当前index值，此处使用 -->
确定
</button>
</div>
</div>
</div>
</div>
<!-- mask --end -->
</div>
</div>
</div>
</body>
<script src="./index.js"></script>
</html>
css代码
*{
margin: 0;
padding: 0;
list-style: none;
}
/* 解决高度塌陷 */
.card{
overflow: hidden;
}
/* 卡片下方按钮 */
.my-btn-box{
display: flex;
padding: 10px;
}
.my-btn-box button{
margin: 5px;
}
/* 黑幕 */
.mask-box{
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index:1000;
}
.mask-box-bg{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: black;
opacity: .5;
}
/* 黑幕中间盒子 */
.mask-box .card{
width: 80%;
height: 100px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
border-radius: 10px
}
/* 底部 */
footer{
position: fixed;
width: 100%;
height: 80px;
left: 0;
bottom:10px;
}
footer ul{
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
}
/* 底部按钮 */
footer ul li{
width: 80px;
height: 80px;
border-radius: 50%;
/* background: red */
}
footer ul li.circle{
text-align: center;
line-height: 80px
}
footer ul li.circle.circle-success{
border: 1px solid green;
color: green
}
footer ul li.circle.circle-success.circle-fill{
background: green;
color: white
}
footer ul li.circle.circle-primary{
border: 1px solid blue;
color: blue
}
footer ul li.circle.circle-primary.circle-fill{
background: blue;
color: white
}
footer ul li.circle.circle-warning{
border: 1px solid orangered;
color: orangered
}
footer ul li.circle.circle-warning.circle-fill{
background: orangered;
color: white
}
js代码
new Vue({
el: '#app',
data: {/* 原始数据 */
todos: [
{
id : 1,
task : '唱',
flag: true/* 用于判断是否勾选 */
},
{
id : 2,
task : '跳',
flag: true
},
{
id : 3,
task : 'rapper',
flag: true
}
],
add_todo_flag:false,/* 控制input输入框的出现与消失 */
add_todo_input:'请输入代办事项',/* input输入框原始提示信息及输入内容 */
mask_flag:false,/* 控制遮罩的消失与出现 */
active_index : 0, /* 保存index,在mask点击确定按钮的时候使用 */
btns:[{
id:1,
content:'A',
name:'all',// all 全部的任务
mold:'success' //类型
},{
id:2,
content:'F',//finish 完成了的任务
name:'finish',
mold:'primary'
},{
id:3,
content:'U',
name:'unfinish',//unFinish 未完成的任务
mold:'warning'
}],
type:'all'
},
methods: {
check( index ){
this.active_index = index;
/* 判断当前是否勾选 */
if(this.todos[index].flag){
this.remove(index)
}else{
this.mask_flag = true
}
},
remove( index ){/* 删除当前项 */
this.todos.splice(index,1)
},
addTodoItem () {/* 添加卡片块 */
this.todos.push({
id : this.todos.length + 1,
task : this.add_todo_input,
flag : true
});
this.add_todo_input = '';/* 添加完成后输入框内容变为空 */
this.add_todo_flag=false;/* 添加完成后输入框消失 */
},
getFocus(){/* 获得焦点提示信息消失 */
this.add_todo_input=''
}
},
computed:{
allTodos(){
return this.todos;/* 所有项目 */
},
finishTodos(){
return this.todos.filter(item =>{
return item.flag && item/* flag为true也就是打了勾的项目 */
})
},
unfinishTodos(){
return this.todos.filter(item =>{
return !item.flag && item/* flag为false也就是没打勾的项目 */
})
},
newTodos(){/* 点击不同按钮渲染不同界面 */
switch (this.type) {
case 'all':
return this.allTodos
break;
case 'finish':
return this.finishTodos
break;
case 'unfinish':
return this.unfinishTodos
break;
default:
break;
}
}
}
})
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- vue学习-03--使用vue制作简单的todolist
- vue中实现简单的todolist功能、todolist组件拆分以及todolist的删除功能
- 使用 Vue.js 制作一个简单的调查问卷平台
- vue简单制作图片上传功能
- 使用Vue完成一个简单的todolist的方法
- vue+element-ui简单制作后台管理系统以及element table组件的应用
- vue简单实例（todolist）
- vue.js 学习笔记 制作简单的todo list
- 使用 Vue.js 制作一个简单的调查问卷平台
- flask + vue.js 实现简单todolist应用
- Vue.js实现简单ToDoList 前期准备（一）
- vue实现简单的ToDoList
- Vue.js实现简单ToDoList 前期准备（一）
- Vue实现简单ToDoList
- vue 移动端 滑动事件 v-touch 制作 简单 swiper
- vue.js之 todolist 简单综合实例
- Vue.js实现简单ToDoList 前期准备（一）
- 利用vue做一个简单的todolist
- vue-简单的todolist
- VUE编写一个简单的 ToDoList