vue简单选项卡

最新推荐文章于 2024-05-15 13:06:41 发布

小糖子先森

最新推荐文章于 2024-05-15 13:06:41 发布

阅读量244

点赞数

分类专栏： vue学习

本文链接：https://blog.csdn.net/tang242424/article/details/105009423

版权

vue学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript" src="jquery.min.js"></script>
		<style type="text/css">
			input {
				width: 100px;
				height: 50px;
				border: 0;
				outline: none;
				font-size: 25px;
				cursor: pointer;
			}
			
			.active {
				background: pink;
				color: #fff;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<input @click="test(index)" v-bind:class="{active:index == i}" v-for="item,index in jsonList" type="button" name="" id="" v-bind:value="item.title" />
			<div v-for="item,j in jsonList" v-bind:style="{display:j === i ? 'block' : 'none'}">
				<div v-for="items in item.conentList">{{items.con}}</div>
			</div>
		</div>
		<script type="text/javascript">
			let jsonList = [{
					title: "工具",
					conentList: [{
							con: "图片下载工具"
						},
						{
							con: "视频下载工具"
						},
						{
							con: "数字万能工具"
						}
					]
				},
				{
					title: "图片",
					conentList: [{
							con: "图片1"
						},
						{
							con: "图片2"
						}
					]
				},
				{
					title: "文章",
					conentList: [{
							con: "文章1"
						},
						{
							con: "文章2"
						},
						{
							con: "文章3"
						}
					]
				},
			]
			var app = new Vue({
				el: "#app",
				data: {
					jsonList,
					i: 0
				},
				methods: {
					test(index) {
						this.i = index;
					}
				}
			});
		</script>
	</body>

</html>

小糖子先森

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue简单选项卡

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> ...
复制链接

扫一扫