<style>
.tab-warp{
border-bottom: solid 1px #e0e0e0;
overflow: hidden;
margin-top: 30px;
position: relative;
z-index: 1;
}
.tab-item{
float: left;
height: 34px;
line-height: 32px;
padding: 0 20px;
border-radius: 3px 3px 0 0;
position: relative;
z-index: 4;
border: solid 1px transparent;
transition: border .5s, color .3s;
cursor: pointer;
}
.tab-item.selected{
border-color: #e0e0e0 #e0e0e0 transparent;
color: #2d8cf0;
}
</style> <template>
<div class="tab-warp">
<div class="tab-item" :class="{selected:index == indexCur}" v-for="(item, index) in info.tabInfo"
@click="setCategory(item,index)">{{item.categoryName}}
</div>
</div>
</template> <script>
export default () {
data(){
return {
indexCur: 0
}
},
          mathods:{
              setCategory (item,index) {
              this.indexCur = index;
         },
     }
    
}
</script> 效果图:

注:当 index == indexCur 时才会添加selected类,template中有些内容是接口获取来的可不必理会

Vue+iview实现添加删除类的更多相关文章

  1. 用JQuery动态为选中元素添加/删除类

    在做一些tab页功能时,我们经常会见到如下样式: 即当选中一个元素时,在此元素下会添加相应的类,以示区别.今天就研究了一下如何用JQuery实现此效果. 1. HTML代码 <a id=&quo ...

  2. 使用Bootstrap + Vue.js实现 添加删除数据

    界面首先需要引入bootstrap的css和bootstrap的js文件,还有vue.js和jQuery.js才可以看见效果. 这里提供bootstrap的在线文件给大家引用: <!-- 最新版 ...

  3. vue.js实现添加删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JQuery_给元素添加或删除类等以及CSS()方法

    一.addClass() - 向被选元素添加一个或多个类 <script src="jquery-1.11.1.min.js"></script> < ...

  5. 原生js添加和删除类

    原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...

  6. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  7. vue实现购物清单列表添加删除

    vue实现购物清单列表添加删除 一.总结 一句话总结: 基础的v-model操作,以及数组的添加(push)删除(splice)操作 1.checkbox可以绑定数组,也可以直接绑定值? 绑定数组就是 ...

  8. 后盾网lavarel视频项目---vue实现动态添加和删除板块

    后盾网lavarel视频项目---vue实现动态添加和删除板块 一.总结 一句话总结: 原理就是:列表时根据vue中的videos变量中的元素来遍历的,初始时videos:[{title:'',pat ...

  9. vue简单案例_动态添加删除用户数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. update layer tree导致页面卡顿

    前因 今天检查一个vue页面问题,就是在切换Tab时候(某些win10电脑),页面会卡顿一段很长的时间,短则3秒,长则十几秒,这个体验非常糟糕,于是我着手寻找其中原因. 概况 这个vue页面的元素非常 ...

  2. IOC注解开发与XML整合

    区别: xml:可以适用于任何场景,结构清晰,方便维护 注解:开发方便,快速.有些地方适用不了,这个类不是自己提供的(比如源码提供的类) xml和注解整合开发,各取所长 xml使用于对bean进行管理 ...

  3. 【NOI2018模拟】Yja

    [NOI2018模拟]Yja Description 在平面上找\(n\)个点,要求这 \(n\)个点离原点的距离分别为 \(r1,r2,...,rn\) .最大化这\(n\) 个点构成的凸包面积,凸 ...

  4. python 列表 元祖

    # # 1,写代码,有如下列列表,按照要求实现每⼀一个功能li = ["alex", "WuSir", "ritian", "ba ...

  5. nginx相关命令

    https://www.cnblogs.com/zdz8207/p/CentOS-nginx-yum.html

  6. pom文件miss artifact com.sun:tools:jar:1.5.0:system问题

    问题现象: 导入新的maven项目时,有时候pom.xml文件会提示一个错误信息:Missing artifact com.sun:tools:jar:1.5.0:system 问题原因: maven ...

  7. UVA1471-Copying Books(二分答案)

    Problem UVA1471-Copying Books Accept: 2669  Submit: 22797Time Limit: 3000 mSec Problem Description B ...

  8. mysql 使用正则表达式查询

    SELECT * FROM `qq` where qq_name!='no' and qq_gender='女' and qq_location!='no' and qq_location!='' a ...

  9. [MicroPython]TPYBoardv102播放音乐实例

    0x00前言 前段时间看到TPYBoard的技术交流群(群号:157816561,)里有人问关于TPYBoard播放音乐的问题.最近抽空看了一下文档介绍,着手做了个实验.更多MicroPython的教 ...

  10. mysql 性能优化思路 - mysqldumpslow /tmp/mysql-slow.log 字符集 utf-8 create database

    提高MySQL服务的性能,响应速度: 1.替换有问题的硬件:内存,CPU,磁盘 2.服务的配置参数的配置 3.SQL的优化 .服务参数的配置: 1.1 连接数,连接超时: max_connection ...