Vue入门练习09--选项卡切换

最新推荐文章于 2022-08-02 10:07:14 发布

AsaZyf

最新推荐文章于 2022-08-02 10:07:14 发布

阅读量271

点赞数

分类专栏： Vue 文章标签： Vue Vue练习 Vue选项卡切换选项卡切换

本文链接：https://blog.csdn.net/AsaZyf/article/details/83315290

版权

Vue 同时被 2 个专栏收录

50 篇文章 1 订阅

订阅专栏

Vue练习

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选项卡切换</title>
		<script type="text/javascript" src="js/vue.js" ></script>
		<style>
			*{
				margin: 0;
			}
			.tabNav{
				width: 500px;
				height: 40px;
				border: 1px solid black;
				display: flex;
				background: #337AB7;
				margin: 0 auto;
			}
			.tabNav .item{
				flex: 1;				
			}
			.tabNav .item a{
				display: block;
				height: 40px;
				text-align: center;
				line-height: 40px;
				color: #fff;
			}
			.tabNav .item a.active{
				background: #fff;
				color: #000000;
			}
			.tabCon{
				width: 500px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="tabNav">
				<div class="item" v-for="(item,index) in tabNav">
					<a href="javascript:;" :class="{active:item.active}" 
						@click="toggle(index)">
						{{item.title}}
					</a>
				</div>

			</div>
			<div class="tabCon">
				<p v-for="list in tabCon" v-if="list.isShow">
					{{list.content}}
				</p>
				
			</div>
			
		</div>
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					tabNav:[
						{title:"选项1",active:true},
						{title:"选项2",active:false},
						{title:"选项3",active:false}
					],
					tabCon:[
						{content:"1",isShow:true},
						{content:"2",isShow:false},
						{content:"3",isShow:false}
					]
				},
				methods:{
					toggle:function(index){
//						alert(index)
						for (var i=0;i<this.tabNav.length;i++) {
							this.tabNav[i].active = false
							this.tabCon[i].isShow = false
						}
						
						this.tabNav[index].active = true
						this.tabCon[index].isShow = true
					}
				}
			})
		</script>
	</body>
</html>

AsaZyf

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue入门练习09--选项卡切换

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;选项卡切换&lt;/title&gt; &lt;script type="text/javascript" src="js/vue.js" &g
复制链接

扫一扫

专栏目录