<html>
<head>
<meta charset="UTF-8">
<title>list</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
body{font-family: "微软雅黑";font-size: 14px;}
input{font-size: 14px;}
body,ul,div,html{padding: 0;margin: 0;}
li div{display: block;}
li .status-span.status-end{background: #09f;}
.status-end{background: #09f;}
li.eidting div{display: none;}
li .text2{height: 40px;padding-left: 10px;box-sizing: border-box;margin-left: 10px;width: 80%;display: none;}
li.eidting .text2{display: block;}
.hidden{display: none;}
.main{width: 800px;margin: 0 auto;}
li{list-style-type: none;line-height: 40px;position: relative;border: 1px solid transparent;padding: 0 20px;}
li .type-span{display: block;width: 10px;height: 10px;background: #ccc;margin: 14px 10px 0 0 ;float: left;}
li .status-end{display: block;width: 10px;height: 10px;background: #09f;margin: 14px 10px 0 0 ;float: left;}
li .close{position: absolute;color: #f00;font-size: 20px;line-height: 40px;height: 40px;right: 20px;cursor: pointer;display: none;top: 0;}
li:hover{border: 1px solid #09f;}
li:hover .close{display: block;}
li .text-keyword{height: 40px;padding-left: 10px;box-sizing: border-box;margin-left: 10px;width: 80%;display: none;}
.text-keyword{box-sizing: border-box;width: 100%;height: 40px;padding-left: 10px;outline: none;}
</style>
</head>
<body>
<div id="app" class="main">
<h2>小目标列表</h2>
<div class="list">
<h3>添加小目标</h3>
<input type="text" class="text-keyword" @keyup.13="addlist" v-model="addText" placeholder="输入小目标后，按回车确认"/>
<p>共有{{getnum}}个目标</p>
<p>
<input @click="shooselist(1)" type="radio" name="chooseType" checked="true"/><label>所有目标</label>
<input @click="shooselist(2)" type="radio" name="chooseType"/><label>已完成目标</label>
<input @click="shooselist(3)" type="radio" name="chooseType"/><label>未完成目标</label>
</p>
</div>
<ul>
<li v-for="(item,index) in newlist" class="li1">
<div @click="item.status=!item.status">
<span :class="{'status-end':item.status}" class="type-span"></span>
<span>{{item.name}}</span>
<span @click="deletelist(index)" class="close">X</span>
</div>
</li>
</ul>
</div>
</body>
<script src="vue2.4.2.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
addText:'',
num:0,
newlist:[],
prolist:[
{name:"html5",status:false},
{name:"css3",status:false},
{name:"Vue",status:false},
{name:"javascript",status:false}
]
},
computed:{
getnum:function(){
return this.newlist.length;
}
},
methods:{
addlist(){
this.prolist.push({name:this.addText,status:false});
this.addText="";
},
deletelist(i){
this.prolist.splice(i,1)
},
shooselist(type){
switch(type){
case 1:this.newlist=this.prolist;break;
case 2:this.newlist=this.prolist.filter(function(e){
return e.status==true;
});break;
case 3:this.newlist=this.prolist.filter(function(e){
return e.status==false;
});break;
}
}
},
mounted(){
this.newlist=this.prolist
}
});
</script>
</html>
