首页 > 代码库 > vue1.0+vue2.0实现选项卡
vue1.0+vue2.0实现选项卡
通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加active类,用vue实现也是同样的原理,都是操作active类。
我们都知道用vue给一个dom节点添加一个类的方法,要实现选项卡就的操作active类。
我们可以传给 v-bind:class
一个对象,以动态地切换 class 。
<div v-bind:class="{ active: isActive }"></div>
|
上面的语法表示 class active
的更新将取决于数据属性 isActive
是否为真。
html
js
效果
在用vue2.0的情况下
在用vue1.0的情况下
<div id="app">
<ul>
<li @click="toggle($index)" v-for="tab in tabs" :class="{active:active==$index}">
{{tab.type}}
</li>
</ul>
</div>
vue1.0+vue2.0实现选项卡
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。