点赞·精灵图

最新推荐文章于 2024-06-13 02:48:16 发布

令月十一

最新推荐文章于 2024-06-13 02:48:16 发布

阅读量137

点赞数

分类专栏：图片 vue 文章标签： javascript html5

本文链接：https://blog.csdn.net/weixin_44234050/article/details/119995156

版权

图片同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

vue

13 篇文章 0 订阅

订阅专栏

效果图：

<html>
	<head>
		<meta charset="utf-8">
		<title>点赞·精灵图</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<style type="text/css">
			ul {
				list-style: none;
			}

			ul li {
				display: flex;
				align-items: center;
			}

			i.heart {
				width: 45px;
				height: 48px;
				display: block;
				background: url("https://cssanimation.rocks/images/posts/steps/heart.png") no-repeat;
				-webkit-transition: background-position 1s steps(28);
				transition: background-position 1s steps(28);
				-webkit-transition-duration: 0s;
				background-size: auto 50px;
				transition-duration: 0s;
			}

			i.heart.active {
				background-position: -1400px 0;
				-webkit-transition-duration: 1s;
				transition-duration: 1s;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul v-for="item in thumbs">
				<li @click="thumbsUp(item)" :key="item.id">
					<i class="heart" :class="{active:isThumbsUp(item)}"></i>
					<span>{{item.thumbup}}人赞</span>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		let Main = {
			data() {
				return {
					// 点赞id
					thumbsUps: [],
					// 创建id递增的数组，thumbup为点赞人数
					// Array(10).fill(0)创建长度为10填充0的数组
					// map对数组进行替换
					thumbs: Array(10).fill(0).map(
						function(item, index) {
							return {
								id: ++index,
								thumbup: 0
							}
						}
					)
				}
			},
			methods: {
				// 判断点赞id是否存在
				isThumbsUp(e) {
					return this.thumbsUps.includes(e.id)
				},
				// 存在（即要取消点赞）人数减一，数组中移除id
				// 不存在（即要点赞）人数加一，id添加至数组中
				thumbsUp(e) {
					if (this.isThumbsUp(e)) {
						e.thumbup--;
						this.thumbsUps = this.thumbsUps.filter(item => item != e.id)
					} else {
						e.thumbup++;
						this.thumbsUps.push(e.id)
					}
				}
			}
		}
		let Ctor = Vue.extend(Main);
		new Ctor().$mount('#app');
	</script>
</html>

第二套methods方案：
采取Set集合has方法判断点赞id是否存在
Set集合delete方法移除取消点赞
Set集合add方法添加点赞
Array.from将Set集合转Array数组

		// 点赞
		isThumbsUp(e) {
			return new Set(this.thumbsUps).has(e.id)
		},
		thumbsUp(e) {
			this.thumbsUps = this.isThumbsUp(e) ?
				Array.from(new Set(this.thumbsUps).delete(e.id)) :
				Array.from(new Set(this.thumbsUps).add(e.id))
		},

令月十一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点赞·精灵图

效果图：<html> <head> <meta charset="utf-8"> <title>点赞·精灵图</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <style type="text/css">
复制链接

扫一扫