v-for循环后，点击事件控制子组件显示与隐藏

//   先说思路  整体代码在下面可以直接使用


1.给按钮添加点击事件，用来控制子组件显示与隐藏
    @click="ArticleDetail(index)"
2.声明一个变量
    activeIndex: -1, // 初始化点击的索引值,
3.子组件使用v-show进行响应式
    v-show="activeIndex===index"
4.写方法
    	ArticleDetail(index) {
				if (this.activeIndex !== index) {
					this.activeIndex = index;
				} else {
					this.activeIndex = -1;
				}
			},
5.子组件可以正常展示与掩藏，不过我们希望点击其他地方是，自组件必须进行关闭
created() {
			// w3c ocument.addEventListener用法
			// 在文档中添加点击事件。当用户在文档任何地方点击时，在 id="demo" 的 <p> 元素上输出                         
            // "Hello World"：
			// document.addEventListener("click", function(){
			//     document.getElementById("demo").innerHTML = "Hello World";
			// });

//当用户进行点击任意地方时，进行调用控制子组件显示与掩藏的方法
			document.addEventListener("click", (e) => {
				if (e.changedTouches === undefined) {
					this.ArticleDetail()
				}
			});
},

2.我把全部代码粘一下，可以直接使用的

<template>
	<view class="wrapper">
		<div class="cards" id="v-content" v-bind:style="{minHeight: Height+'px'}">
			<div class="card" v-for="(item,index) in 2" :key="index">
				<div class="card-img">
				</div>
				<div class="card-right">
					<view class="card-title">杭州高端餐厅配送</view>
					<view class="card-tit">设计师以日式空间的设计原则为基础，提出了整体式的设计概念，以最少的材料色调打造出一个简洁..[全文]</view>
					<view class="right-img">
						<!-- <img src="@/assets/image/touxiang.png" alt="" /> -->
						<view class="" style="width: 85px;height: 70px;background: #eee;"></view>
					</view>
					<div class="vard-address">杭州市 · 杭州市祥茂路16号威格科技园16号</div>
					<div class="d-between">
						<view class="" style="margin-top: 5px;">8分钟前</view>
						<div class="d-flex">
							<!-- <u-icon name="more-dot-fill" colr="#576B95" size="35" @click="ArticleDetail(index)">
							</u-icon> -->
							<div @click="ArticleDetail(index)">点击我！！！</div>
						</div>
						<view class="pop d-around" v-show="activeIndex===index">
							<view class="" @click="like()">点赞</view>
							<view class="" @click="comment()">评论</view>

							<view class="" @click="deleted()">删除</view>
						</view>
					</div>
				</div>
			</div>
		</div>
		<Footer>111</Footer>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 0,
				activeIndex: -1, // 初始化点击的索引值,
				Height: 0
			};
		},
		mounted() {
			//动态设置内容高度 让footer始终居底   header+footer的高度是100
			this.Height = document.documentElement.clientHeight - 100;
			//监听浏览器窗口变化　
			window.onresize = () => {
				this.Height = document.documentElement.clientHeight - 100
			}
		},
		created() {
			// w3c ocument.addEventListener用法
			// 在文档中添加点击事件。当用户在文档任何地方点击时，在 id="demo" 的 <p> 元素上输出 "Hello World"：
			// document.addEventListener("click", function(){
			//     document.getElementById("demo").innerHTML = "Hello World";
			// });
			document.addEventListener("click", (e) => {
				if (e.changedTouches === undefined) {
					this.ArticleDetail()
				}
			});
		},
		methods: {
			ArticleDetail(index) {
				if (this.activeIndex !== index) {
					this.activeIndex = index;
				} else {
					this.activeIndex = -1;
				}
			},
			like() {
				this.ArticleDetail()
				console.log(1);
			},
			comment() {
				this.ArticleDetail()
				console.log(2);
			},
			deleted() {
				this.ArticleDetail()
				console.log(3);
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .tab .tab-bar[data-v-8a659874]::after {
		content: '';
		width: 100%;
		height: 1px;
		position: absolute;
		bottom: 0;
		left: 0;
		background: #fff;
	}


	.cards {
		padding: 0 10px 50px 10px;

		.card {
			display: flex;
			font-size: 12px;
			margin-top: 10px;

			.card-img {
				img {
					width: 40px;
					height: 40px;
				}

				.card-btn {
					color: #fff;
					padding: 2px 4px;
					margin-top: 4px;
					line-height: 14px;
					border-radius: 4px;
					text-align: center;
					background: #58A875;
				}
			}

			.card-right {
				position: relative;
				font-size: 12px;
				margin-left: 8px;

				.card-title {
					font-size: 14px;
					color: #0042A2;
				}

				.card-tit {
					margin-top: 5px;
					width: 100%;
				}

				.right-img {
					img {
						width: 85px;
						height: 70px;
						margin-top: 8px;
					}
				}

				.vard-address {
					color: #0042A2;
					margin-bottom: 3px;
				}

				.pop {
					width: 108px;
					height: 32px;
					color: #fff;
					right: 24px;
					top: 155px;
					z-index: 2;
					border-radius: 3px;
					position: absolute;
					background: #000;
				}

				.comment {
					width: 100%;
					padding: 9px;
					margin-top: 14px;
					font-size: 16px;
					background: #F3F3F5;

					.comment-top {
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						padding-bottom: 4px;
						border-bottom: 1px solid #CECECE;


					}

					.comment-bom {
						.paragraph {
							display: flex;
							margin-bottom: 3px;
						}
					}

					.name {
						color: #576B95;
						white-space: nowrap;
					}

					.mar {
						margin: 0 2px;
						color: #CECECE;
						white-space: nowrap;
					}
				}
			}
		}
	}
</style>