vue.js之 todolist 简单综合实例
todolist 效果图:
具体代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title></title>
<script src="https://unpkg.com/vue"></script>
<style type="text/css">
.edit {display:block;width:80%;height:35px;line-height:35px;margin:30px auto;box-sizing:border-box;padding-left:4px;border-radius:4px;border:1px solid #ccc;outline:0;box-shadow:0 0 5px #ccc;}
.list {margin:0 auto;width:80%;}
.unit {position:relative;padding:10px 0;border-bottom:1px solid #efefef;}
.unit:last-child {border-bottom:0;}
.finish {text-decoration:line-through;color:#ccc;}
.del {background:red;text-decoration:none;position:absolute;right:0;font-size:12px;border:0;outline:0;padding:2px 5px;border-radius:5px;color:#fff;}
.empty {font-size:13px;color:#ccc;text-align:center;padding:10px 0;}
</style>
</head>
<body>
<div id="app">
<input class="edit" type="text" v-model="task.content" v-on:keydown.enter="addTask" />
<div class="list">
<div class="unit" v-for="(item,index) in list">
<input type="checkbox" v-on:click="changeState(index)" v-bind:checked="item.finished">
<span v-bind:class="{'finish':item.finished}"> {{item.content}}</span>
<button v-on:click="removeTask(index)" class="del">删除</button>
</div>
</div>
<p class="empty" v-if="list.length == 0">暂无任务</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
task: {
content: '',
finished: false,
deleted: false
},
list: []
},
methods: {
addTask: function() {
this.list.push(this.task);
this.task = {
content: '',
finished: false,
deleted: false
}
},
changeState: function(index) {
var cur = this.list[index].finished;
this.list[index].finished = !cur
},
removeTask: function(index) {
this.list.splice(index, 1)
}
}
}
);
</script>
</body>
</html>
本文作者:猫老板的豆
本文链接:https://www.cnblogs.com/bingcola/p/16499279.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步