1.html

  <div class="filter-nav" v-for="(item,index)  in  filterData.navTab" :key="index" :class="{'active':currentSort==index}" @click="active(index)">
<span>{{item.name}}</span>
<i v-if="item.icon" :class="'fa fa-'+item.icon"></i>
</div>

2.在循环的代码那里添加

 :class="{'active':currentSort==index}"

3.添加样式

.active {
color: #009eef;
}

4.初始化数据

 data() {
return {
currentSort:,
}
},

5.调用方法

 methods: {
active(index) {
this.currentSort = index;
}
},

当我们触发点击事件的时候,传入循环的index  ,这样我们就可以将绑定房东样式赋给点击到的x

Vue实现active点击切换样式的更多相关文章

  1. Vue实现active点击切换

    Vue实现active点击切换 循环的情况: 1.点击时传入index索引(获取当前点击的是哪个) @click=“active(index)” 2.将索引值传入class(索引等于几就第几个添加ac ...

  2. angular ng-repeat点击切换样式,浅谈track by $index

    前言 angular ng-repeat点击切换样式,ng-repeat点击切换class样式,巧用ng-repeat track by $index. 1.问题 一个ul包含多个li,li通过ng- ...

  3. vue点击切换样式,点击切换地址栏,点击显示或者隐藏

    1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...

  4. vue 实现active点击图片切换

    循环条件下: 1.点击函数@click="active(index)" 获取点击的位置 2.讲索引值传给class,点击哪一个则显示哪一个的样式 3.在data添加ins的初始值 ...

  5. 使用vue实现tab栏的点击切换样式

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

  6. vue点击切换颜色限制个数(用了mui框架)

    vue点击切换颜色 只能点击一个 <!doctype html> <head> <meta charset="UTF-8"> <title ...

  7. vue切换样式

    在vue中使用事件来切换绑定的class样式,在vue-cli脚手架中的Home.vue中 <template> <div id="main"> <l ...

  8. jquery——左右按钮点击切换一组图片功能

    一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...

  9. jquery中点击切换的实现

    项目中经常会遇到一种情况,就是点击切换,比如点击按钮,div样式为1,再点击一下按钮,div样式为2,再点击一下按钮,div样式为1.需要自定义jQuery方法toggle. // toggle方法 ...

随机推荐

  1. linux运维、架构之路-正则表达式

    一.通配符的含义 符号 参数说明 其他说明 | 管道 把前一个命令结果通过管道传递给后面一个命令 ; 命令的分隔符 ll /oldboy/;cat oldboy.tx . 表示当前目录 * 匹配文本或 ...

  2. linux centos添加yum镜像

    下载配置文件,加入/etc/yum.repos.d/阿里镜像:http://mirrors.aliyun.com/repo/Centos-7.repo网易镜像:http://mirrors.163.c ...

  3. (1)消灭初级程序员常用的多层if-else嵌套--------------【表驱动法】

    表驱动法 1.相信很多刚从事工作的程序员或一些初级程序员在写代码的时候会出现对一些逻辑判断写成多层if-else嵌套的经历,这种方式在一些简单的层次中运用起来确实可行,但对于一些大型项目逻辑判断比较多 ...

  4. Favorite Donut

    Favorite Donut Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) ...

  5. RabbitMQ生产者消费者模型构建(三)

    ConnectionFactory:获取连接(地址,端口号,用户名,密码,虚拟主机等) Connection:一个连接 Channel:数据通信信道,可发送.接收消息 Queue:具体的消息存储队列 ...

  6. php面试专题---20、MySQL的安全性考点

    php面试专题---20.MySQL的安全性考点 一.总结 一句话总结: 还是得多看视频,教程看的浮光掠影,容易get不到重点:比如预处理防sql注入之前是挺熟,后面就忘记了,而且看文章get不到点 ...

  7. php面试专题---17、MySQL的SQL语句编写考点

    php面试专题---17.MySQL的SQL语句编写考点 一.总结 一句话总结: 注意:只写精品 1.MySQL的关联UPDATE语句? 关键UPDATE A,B:UPDATE A,B SET A.c ...

  8. php面试专题---14、Linux基础考点

    php面试专题---14.Linux基础考点 一.总结 一句话总结: php考linux其实也考不了很难 1.系统定时任务? crontab命令和 at命令 crontab命令 crontab -e ...

  9. IDEA 服务启动报:No buffer space available (maximum connections reached): connect的解决方案。

    错误提示:严重: Error starting endpointjava.io.IOException: Unable to establish loopback connectionat sun.n ...

  10. 邮件解析 CNAME记录 A记录

    域名配置 示例发信配置请至域名 service.i-test.cn DNS服务提供商处添加TXT记录,并保持SPF记录正确,否则会无法发信.*1.所有权验证类型 主机记录 主域名 记录值 状态TXT ...