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>

 

Logo

前往低代码交流专区

更多推荐