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. Java 迭代器删除元素ConcurrentModificationException异常。

    Java是不支持容器类在使用迭代器迭代过程中,使用如 list.remove(obj)方法删除元素.否则会抛出ava.util.ConcurrentModificationException异常.应该 ...

  2. Yii 1.1 常规框架部署和配置

    <?php //index.php //入口文件配置操作 // change the following paths if necessary $yii=dirname(__FILE__).'/ ...

  3. django缓存优化(二)

    一.缓存目的: 1.减小过载 2.避免重复计算 3.提高系统性能 二.如何进行缓存 三.缓存类型 四.缓存粒度分类 五.缓存的设置与使用 示例一: CACHES = { 'default': { 'B ...

  4. UVA 11752 The Super Powers(暴力)

    题目:https://cn.vjudge.net/problem/UVA-11752 题解:这里只讨论处理越界的问题. 因为题目最上界是 264-1. 我们又是求次幂的. 所以当我们就可以知道 i 的 ...

  5. P3956棋盘

    传送 这看起来有点像个搜索,那我们就用搜索试试. dfs?bfs? 其实都可以,但是窝只会dfs.. 既然这里要用dfs,那么就要把每次搜到(m,m)时,使用的金币数量进行比较,取最小值. 在搜索过程 ...

  6. Ntdll.h

    转自:https://www.cnblogs.com/gwsbhqt/p/5092390.html 为了能使用上Ntdll.lib库函数,从几份不完整的Ntdll.h中拼凑整理出了比较完整美观的Ntd ...

  7. 从零开始创建 symfony-cmf

    前提: 官方 https://symfony.com/doc/master/cmf/quick_tour/the_big_picture.html#setting-up-the-database 由于 ...

  8. poj2376Cleaning Shifts (贪心求解)

    描述 大表哥分配 N (1 <= N <= 25,000) 只中的一些奶牛在牛棚附近做些清洁. 他总是要让至少一只牛做清洁.他把一天分成T段(1 <= T <= 1,000,0 ...

  9. C#静态变量总结

    1.初始化 全局static变量的初始化在编译的时候进行,并且只初始化一次 . 函数static变量在函数中有效,第一次进入函数初始化.以后进入函数将沿用上一次的值.  2.生命期 全局static变 ...

  10. servlet--response、request

    请求响应流程图 response 1       response概述 response是Servlet.service方法的一个参数,类型为javax.servlet.http.HttpServle ...