Vue之导航栏

最新推荐文章于 2024-12-19 11:09:20 发布

shaojia_

最新推荐文章于 2024-12-19 11:09:20 发布

阅读量4.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 前端之路文章标签： vue导航栏

本文链接：https://blog.youkuaiyun.com/a271720559/article/details/81464138

前端之路同时被 2 个专栏收录

40 篇文章

订阅专栏

vue

11 篇文章

订阅专栏

Vue之导航栏

今天我们来用vue实现简单的导航栏。

效果图：

根据点击的tab来展示对应的内容。其实很简单，用到了vue的v-show和绑定class。

首先创建一个属性“shouDiv” 用来判断显示哪一个tab页。

再为每一个连接注册点击事件：@click="showDiv=1"分别让showDiv值改变。

然后为每一个tab页内容绑定v-show用来判断当前showDiv的值来确定是否显示当前div。

最后为tab连接绑定class用来显示点击状态 :class="{'select':showDiv===3}" 如果showDiv=3时就写入样式select

完整代码：

<body>
	<div id="test">
		<div class="tab">
			<a href="#" @click="showDiv=1" :class="{'select':showDiv===1}">html</a>
			<a href="#" @click="showDiv=2" :class="{'select':showDiv===2}">css</a>
			<a href="#" @click="showDiv=3" :class="{'select':showDiv===3}">javascript</a>
			<a href="#" @click="showDiv=4" :class="{'select':showDiv===4}">vue</a>
		</div>
		<div class="tabConten" v-show="showDiv===1">
			<h1>html</h1>
		</div>
		<div class="tabConten" v-show="showDiv===2">
			<h1>css</h1>
		</div>
		<div class="tabConten" v-show="showDiv===3">
			<h1>javascript</h1>
		</div>
		<div class="tabConten" v-show="showDiv===4">
			<h1>vue</h1>
		</div>
	</div>
</body>
<script >
	new Vue({
		el : "#test",
		data : {
			showDiv : 1,
		}
	})
</script>