vue v-html class,在vue中使用v-bind:class的选项卡方法

这篇文章主要为大家详细介绍了在vue中使用v-bind:class的选项卡方法，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！

//vue中的选项卡的实现，数据驱动dom,因此需要使用数据，来改变class；

详细见代码实现

代码如下：

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}

• {{item.message}}

// 使用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

}

}

})

以上这篇在vue中使用v-bind:class的选项卡方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持512笔记。

注：关于在vue中使用v-bind:class的选项卡方法的内容就先介绍到这里，更多相关文章的可以留意512笔记的其他信息。

关键词：vue.js