//vue中的選項卡的實現，數據驅動dom,因此需要使用數據，來改變class；

詳細見代碼實現

<style>ul{overflow: hidden;}ul li{float: left;width: 150px;height: 35px;line-height: 35px;border: 1px solid red;list-style: none;cursor: pointer;}ul li.active{background-color: yellow}</style><div id="app"><ul><li v-for="(item,index) in items" @click="setColor(index)" :key="item.message" :class="{active:index == num}">{{item.message}}</li></ul></div><script>// 使用v-bind:class實現 通過改變num實現進而改變active的布爾值 vue中的選項卡的功能 綁定class 綁定布爾值的實現 var vm = new Vue({el:"#app",data(){return {items: [  { message: 'Foo' },  { message: 'Bar' },  { message: 'Jack' } ],num:0}},methods:{setColor(index){this.num = index}}})</script>

以上這篇在vue中使用v-bind:class的選項卡方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。