<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.container{
width: 100vw;
padding: 10px 10vw 0 10vw ;
}
.title1,.title2{
font-size: 16px;
color: #333333;
font-weight: bold;
margin: 10px 0;
}
.addPlan_item{
width: 80vw;
height: 30px;
margin-bottom: 20px;
}
.addPlan{
width: calc(80vw - 100px);
height: 30px;
border-radius: 5px;
font-size: 14px;
outline: none;
border: 1px solid #ccc;
padding-left: 20px;
box-sizing: border-box;
}
.add{
width: 200px;
height: 40px;
font-size: 18px;
color: #fef6ff;
background: #f0a742;
margin-left: calc(40vw - 100px);
margin-bottom: 20px;
border: 1px solid #e0e0e0;
border-radius: 5px;
box-sizing: border-box;
cursor: pointer;
}
.plan_details{
width: 80vw;
display: flex;
justify-content: space-between;
font-size: 14px;
margin-bottom: 20px;
}
.plan_details p:nth-of-type(1){
width: 100px;
height: 30px;
line-height: 30px;
color: red;
}
.plan_details p:nth-of-type(2){
width: 360px;
height: 30px;
line-height: 30px;
display: flex;
justify-content: space-between;
}
.plan_details p:nth-of-type(2)>span{
display: inline-block;
width: 100px;
height: 30px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
}
ul li{
width: 80vw;
height: 30px;
font-size: 14px;
}
.item{
width: 80vw;
height: 30px;
display: flex;
justify-content: flex-start;
}
.item input{
display: inline-block;
width: 30px;
height: 30px;
}
.item span:nth-of-type(1){
display: inline-block;
width: calc(80vw - 60px);
height: 30px;
line-height: 30px;
padding-left: 20px;
box-sizing: border-box;
}
.item span:nth-of-type(2){
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.item_bg{
background: #e0e0e0;
}
.editPlan{
width: calc(80vw - 60px);
height: 30px;
padding-left: 20px;
box-sizing: border-box;
position: relative;
left: 30px;
top:-30px;
display: none;
}
</style>
<body>
<div class="container">
<p class="title1">添加任务</p>
<div class="addPlan_item">
<label>计划内容:</label>
<input type="text" class="addPlan planBody" placeholder="例如:吃饭睡觉打豆豆">
</div>
<div class="addPlan_item">
<label>计划期限:</label>
<input type="text" class="addPlan planDate" placeholder="例如:吃饭睡觉打豆豆">
</div>
<button class="add" @click="addPlan">添加</button>
<div class="plan_details">
<p>
{{getPlanUnComplete}}个任务未完成
</p>
<p>
<span>所有任务:{{getPlanSum}}个</span>
<span>未完成任务:{{getPlanUnComplete}}个</span>
<span>完成任务:{{getPlanComplete}}个</span>
</p>
</div>
<p class="title2">任务列表</p>
<ul id="ul">
<div v-if="planDataLen">
<li v-for="(item,index) in planData">
<div class="item" :class="{item_bg:item.isComplete}">
<input type="checkbox" @click="editComplete($event)" v-model="item.isComplete">
<span @dblclick="showEdit(index)">{{item.title}}:    {{item.date}}</span>
<span @click="deleltePlan($event,index)">X</span>
</div>
<input type="text" class="editPlan" @keyup.enter="editPlan($event,index)" :value="item.title">
</li>
</div>
</ul>
</div>
<script src="js/vue.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
var app = new Vue({
el: '.container',
data:{
planData:[
// {
// title:'吃饭',
// date:'2018-6-12',
// isComplete:false
// }
],
complete:0,
uncomplete:0,
sum:0
},
computed:{
planDataLen:function () {
return this.planData.length>0?true:false
},
getPlanComplete:function () {
var completePlan=this.planData.filter(function (p1) {
return p1.isComplete
})
var planSum=this.planData.length;
this.complete=planSum-completePlan.length;
return completePlan.length
},
getPlanUnComplete:function () {
var unCompletePlan=this.planData.filter(function (p1) {
return !p1.isComplete
})
var planSum=this.planData.length;
this.uncomplete=unCompletePlan.length;
return unCompletePlan.length
},
getPlanSum:function () {
this.sum=this.planData.length;
return this.planData.length
},
isSelect:function () {
}
},
methods:{
addPlan:function () {
var planBody=$('.planBody').val(),
planDate=$('.planDate').val();
if(planBody==""||planDate==""){
alert('请输入计划的事情和完成期限')
return
}
this.planData.push({
title:planBody,
date:planDate,
isComplete:false
})
},
editComplete:function (e) {
var index=$(e.target).parent().parent().index();
if($(e.target).prop('checked')){
this.planData[index].isComplete=true;
}else {
this.planData[index].isComplete=false;
}
},
deleltePlan:function (index) {
this.planData.splice(index,1);
},
showEdit:function (index) {
$('#ul li').eq(index).find('.editPlan').show();
},
editPlan:function (event,index) {
this.planData[index].title=$(event.target).val();
$(event.target).hide();
}
}
})
</script>
</body>
</html>```
转载于:https://my.oschina.net/u/3407699/blog/1828396