Vue编写的一个小demo 想看效果的童鞋么请移步到鑫大大小屋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cn.vuejs.org/js/vue.js"></script>
<style>
#app{box-shadow:0 0 6px #333; margin:200px auto; width:262px; border:1px solid #E3E3E3; border-radius:10px; padding:30px;}
input[type="text"]{border-radius:5px; width:260px; height:38px; line-height:38px; margin-bottom:20px; color:#A1A0A3; font-size:14px; padding-left:10px; box-sizing:border-box; outline:none;}
.unit{height:30px; line-height:30px; position:relative;}
span.finish{text-decoration:line-through; color:#ccc;}
span{position:relative;}
span.finish:after{content:"finish"; position:absolute; width:50px; height:20px; line-height:20px; text-align:center; border-radius:10px; background:#808080; display:block; right:-65px; top:0; color:#f0dddd; font-size:12px;}
.del{width:50px; height:20px; line-height:20px; text-align:center; color:#F0F0F0; font-size:12px; background:#F00000; border:0 !important; box-shadow:none !important; border-radius:10px; outline:none; cursor:pointer; position:absolute; right:20px; top:4px;}
.empty{text-align:center; color:#999999;}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="task.content" placeholder="编写任务" @keydown.enter="addTask">
<div class="unit" v-for="(item,index) in list">
<button @click="removeTask(index)" class="del">删除</button>
<input type="checkbox" @click="changeState(index)" :checked="item.finished">
<span :class="{'finish':item.finished}" v-if="item.number<10">0{{item.number}}、{{item.content}}</span>
<span :class="{'finish':item.finished}" v-else>{{item.number}}、{{item.content}}</span>
</div>
<p v-show="list.length === 0" class="empty">
暂无任务
</p>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
task:{ // 创建变量
number:1,
content:"",
finished:false,
deleted:false
},
list:[], // 创建数组
},
methods:{
addTask:function () { // 添加到数组
this.list.push(this.task);
this.task = { // 重置task 的内容
content:"", // 内容为空
finished:false, // 未完成
deleted:false, // 未删除
number:app.task.number+1,
}
},
//点击修改任务状态
changeState:function(index){
let curState = this.list[index].finished;
this.list[index].finished = !curState;
},
removeTask:function(index){ // 删除函数
this.list.splice(index,1);
}
}
});
</script>
</body>
</html>