Vue实现active点击切换样式
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点击切换样式的更多相关文章
- Vue实现active点击切换
Vue实现active点击切换 循环的情况: 1.点击时传入index索引(获取当前点击的是哪个) @click=“active(index)” 2.将索引值传入class(索引等于几就第几个添加ac ...
- angular ng-repeat点击切换样式,浅谈track by $index
前言 angular ng-repeat点击切换样式,ng-repeat点击切换class样式,巧用ng-repeat track by $index. 1.问题 一个ul包含多个li,li通过ng- ...
- vue点击切换样式,点击切换地址栏,点击显示或者隐藏
1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...
- vue 实现active点击图片切换
循环条件下: 1.点击函数@click="active(index)" 获取点击的位置 2.讲索引值传给class,点击哪一个则显示哪一个的样式 3.在data添加ins的初始值 ...
- 使用vue实现tab栏的点击切换样式
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- vue点击切换颜色限制个数(用了mui框架)
vue点击切换颜色 只能点击一个 <!doctype html> <head> <meta charset="UTF-8"> <title ...
- vue切换样式
在vue中使用事件来切换绑定的class样式,在vue-cli脚手架中的Home.vue中 <template> <div id="main"> <l ...
- jquery——左右按钮点击切换一组图片功能
一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...
- jquery中点击切换的实现
项目中经常会遇到一种情况,就是点击切换,比如点击按钮,div样式为1,再点击一下按钮,div样式为2,再点击一下按钮,div样式为1.需要自定义jQuery方法toggle. // toggle方法 ...
随机推荐
- Java 迭代器删除元素ConcurrentModificationException异常。
Java是不支持容器类在使用迭代器迭代过程中,使用如 list.remove(obj)方法删除元素.否则会抛出ava.util.ConcurrentModificationException异常.应该 ...
- Yii 1.1 常规框架部署和配置
<?php //index.php //入口文件配置操作 // change the following paths if necessary $yii=dirname(__FILE__).'/ ...
- django缓存优化(二)
一.缓存目的: 1.减小过载 2.避免重复计算 3.提高系统性能 二.如何进行缓存 三.缓存类型 四.缓存粒度分类 五.缓存的设置与使用 示例一: CACHES = { 'default': { 'B ...
- UVA 11752 The Super Powers(暴力)
题目:https://cn.vjudge.net/problem/UVA-11752 题解:这里只讨论处理越界的问题. 因为题目最上界是 264-1. 我们又是求次幂的. 所以当我们就可以知道 i 的 ...
- P3956棋盘
传送 这看起来有点像个搜索,那我们就用搜索试试. dfs?bfs? 其实都可以,但是窝只会dfs.. 既然这里要用dfs,那么就要把每次搜到(m,m)时,使用的金币数量进行比较,取最小值. 在搜索过程 ...
- Ntdll.h
转自:https://www.cnblogs.com/gwsbhqt/p/5092390.html 为了能使用上Ntdll.lib库函数,从几份不完整的Ntdll.h中拼凑整理出了比较完整美观的Ntd ...
- 从零开始创建 symfony-cmf
前提: 官方 https://symfony.com/doc/master/cmf/quick_tour/the_big_picture.html#setting-up-the-database 由于 ...
- poj2376Cleaning Shifts (贪心求解)
描述 大表哥分配 N (1 <= N <= 25,000) 只中的一些奶牛在牛棚附近做些清洁. 他总是要让至少一只牛做清洁.他把一天分成T段(1 <= T <= 1,000,0 ...
- C#静态变量总结
1.初始化 全局static变量的初始化在编译的时候进行,并且只初始化一次 . 函数static变量在函数中有效,第一次进入函数初始化.以后进入函数将沿用上一次的值. 2.生命期 全局static变 ...
- servlet--response、request
请求响应流程图 response 1 response概述 response是Servlet.service方法的一个参数,类型为javax.servlet.http.HttpServle ...