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>