加油加油加油
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>心愿清单</title>
<style>
* {margin: 0;padding: 0;border: 0;
}
body {background: #f0f0f0;font-size: 18px;
}
input {box-sizing: border-box;width: 100%;height: 30px;padding: 0 10px;border: 1px solid #666;font-size: 18px;
}
.wish {padding: 30px;
}
ul {margin: 20px 0;list-style: none;
}
li {display: flex;justify-content: space-between;align-items: center;height: 40px;
}
.wish-btn {position: fixed;right: 0;bottom: 0;left: 0;line-height: 50px;background: #ccc;text-align: center;
}
.modal {position: fixed;top: 0; right: 0;bottom: 0; left: 0;background: rgba(0,0,0,.8);transform: translateX(100%);transition: .6s;
}
.modal.show {transform: translateX(0);
}
.modal .btn {position: absolute;right: 0;bottom: 0;left: 0;line-height: 50px;background: #ccc;text-align: center;cursor: pointer;
}
.modal ul {position: absolute;right: 0;bottom: 50px;left: 0;margin: 0;padding: 10px 30px;background: #fff;
}
</style>
</head>
<body>
<div class="wish"><inputplaceholder="搜索&#im="keyword"><ul><liv-for="(d, i) in searchList":key="i"@click="add(d)"><p>{{ d }}</p><span>+</span></li></ul><divclass="wish-btn"@click="showModal = true">❤️ 心愿清单({{ wishList.length }}) ❤️</div><divclass="modal":class="{ 'show': showModal }"@click.self="showModal = false"><ul><li v-if="wishList.length === 0">暂无数据</li><liv-for="(d, i) in wishList":key="i"@click="toggle(i)"><p :style="{ 'text-decoration': d.done ? 'line-through' : '', 'color': d.done ? 'gray' : '' }">{{ d.text }}</p><span>{{ d.done ? '✓' : '✕' }}</span></li></ul><divclass="btn"@click="showModal = false">关闭</div></div>
</div>
<script src="./vue.min.js"></script>
<script>
new Vue({el: '.wish',data: {list: ['开火车','开跑车','找个好工作','杀死一只狮子','杀死一只骆驼','掌握Vue','搞定ES6'],wishList: [],showModal: false,keyword: ''},computed: {searchList() {const { keyword, list } = this;if (!keyword) return list;return list.filter(i => i.includes(keyword));}},methods: {add(text) {// 缺少判断，先判断是否在数组中存在，如果存在就不加了if (this.wishList.some(i => i.text === text)) return;this.wishList.push({text,done: false});},toggle(i) {this.wishList[i].done = !this.wishList[i].done;}}
});
</script>
</body>
</html>本文发布于:2024-01-28 12:26:10，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/17064159747408.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
