Vue中实现一个元素的显示隐藏

最新推荐文章于 2024-07-19 10:16:01 发布

SkipCode

最新推荐文章于 2024-07-19 10:16:01 发布

阅读量5.2k

点赞数

文章标签： javascript vue

SkipCode

本文链接：https://blog.csdn.net/qq_41848496/article/details/106899515

版权

本文介绍在Vue中如何实现元素的显示和隐藏，通过点击事件动态改变v-show属性，利用后台接口获取数据并为每个条目分配独立的显示控制。在实际场景中遇到的问题及解决方法也进行了分享。

摘要由CSDN通过智能技术生成

Vue中实现一个元素的显示隐藏

在这里插入图片描述

实现如上图所示的效果，点击绿方框可以切换显示和隐藏

废话不多说我们直接上代码

<template>
	<view class="chapters">
		<view class="chapter-contant-items">
			<view class="contant-title">
				<text>第一季</text>
				<image src="" mode="" @click="showDetaol(0)"></image>
			</view>
			<view class="contant-wrap" v-show='items[0]'>
				<view class="contant-contant">
					<image src="" mode="" v-if="false"></image>
					<text>第一集 暴风雨之夜</text>
				</view>
				
				<view class="contant-contant">
					<image src="" mode="" v-if="true"></image>
					<text>第二集 暴风雨暴风雨暴风雨暴风雨</text>
				</view>
			</view>
		</view>
		
		<view class="chapter-contant-items">
			<view class="contant-title">