Vue.js實現tab切換效果
阿新 • • 發佈:2019-02-02
Vue是一個小巧輕便的JavaScript庫。它有一個簡單易懂的API,能夠讓開發者在開發web應用的時候更加簡易便捷。實際上,一直讓Vue引以為豪的是它的便捷性、執行力、靈活性。
目前在學習Vue.js。在學習的時候需要把手動操作DOM的思維去掉,因為Vue是資料驅動,不需要手動操作DOM。他通過一些特殊的hmtl語法,將DOM和資料繫結起來。一旦建立了繫結,DOM就會和資料保持同步,每當變更了資料,DOM也會相應的發生改變,更新。
下面是我用vue.js來實現的tab切換功能。
<!--這裡是html結構-->
<div id="app">
<ul >
<li
v-for="(item,index) in tabs"
:class="{active:index == num}"
@click="tab(index)">{{item}}</li>
</ul>
<div class="tabCon">
<div
v-for='(itemCon,index) in tabContents'
v-show =" index == num">{{itemCon}}</div>
</div>
</div>
<!--這裡是js程式碼-->
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
tabs: ["標題一", "標題二","標題三"],
tabContents: ["內容一", "內容二","內容三"],
num: 1
},
methods: {
tab(index) {
this .num = index;
}
}
});
</script>
使用vue.js實現tab切換很簡單,先使用v-for把資料遍歷渲染到頁面上,v-for中有一個index表示索引,將index作為引數傳入到tab(index)這個函式中,在data中定義一個num變數,在title中如果index==num,這個title就會新增一個acive的class。當然,這個num是需要在tab()這個函式中不斷改變的,需要將傳入的索引值賦值給num,這樣在.tabCon裡,我們就可以用v-show做下判斷。v-show=”index==num”,如果等於的話,當前的內容就會顯示。否則隱藏。
我感覺學習vue,首先把以前的那種傳統思維轉變過來是主要的,其次就是不斷實踐,不斷的敲程式碼,才可以更深入的學習Vue.js。