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。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。