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>