Vue点击显示且隐藏其它

最新推荐文章于 2024-12-14 20:32:59 发布

潔19

最新推荐文章于 2024-12-14 20:32:59 发布

阅读量2.6k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_41909712/article/details/87939972

Vue中 v-show指令的简单demo，代码如下：

<!DOCTYPE html>
<html>

<head>
	<title></title>
	<style type="text/css">
		* {
			list-style: none;
		}
		.border-style{
		   border: 2px solid deeppink;
		   height: 150px;
		   width: 350px;
		}
	</style>
</head>

<body>
	<div class="app">
		<ul>
			<li v-for="(item,index) in message" :key='item.index' @click="showText(index, item.id)">
				<!-- 可以在函数的()里面把需要传递的参数传进去 -->
				{{item.name}}&nbsp;&nbsp;&nbsp;{{item.id}}&nbsp;&nbsp;&nbsp;{{item.num}}<br />
				<div class="border-style" v-show="isShow === index"></div>
			</li>
		</ul>
	</div>
</body>

</html>
<script src="https://cdn.bootcss.com/vue/2.5.20/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el: '.app',
		data: {
			isShow: 0, //这里默认为0，取到message数组里面第一条数据
			message: [
				{id: '1',name: '火锅',num: '99/人'},
				{id: '2',name: '烧烤',num: '89/人'},
				{id: '3',name: '烤鱼',num: '88/条'}
			]
		},
		methods: {
			showText: function (index, id) {
				const self = this; 
				if (self.isShow === index) {
					self.isShow = -1;  //在这里就将它赋值为-1  由于：-1 !=  index 所以其他内容隐藏 ，被点击的则打开
				} else {
					self.isShow = index;    //这里是把index赋值给isShow，isShow=index则显示
				}
			}
		}
	})
</script>