Vue实现active点击切换
Vue实现active点击切换
循环的情况:
1、点击时传入index索引(获取当前点击的是哪个)
@click=“active(index)”
2、将索引值传入class(索引等于几就第几个添加active类)
:class="{active:index==ins}"
3、在data里边添加ins:0(表示默认第一个添加active类)
data{ ins:0 }
4、最后在methods里边添加方法
active(num) {
this.ins=num
}
非循环的情况:
1、在标签内写入点击事件和添加的class样式
注释: :class="{active:shows1}"就是说当shows1时添加class=active,否则不添加。
2、在methods里边定义方法
效果如下:
到此就完成了点击切换效果。
附加:
使用三木运算符实现筛选箭头切换三木运算符执行方法:如果show==1为真,则显示icon_up.png,否则显示icon_down.png
Vue实现active点击切换的更多相关文章
- Vue实现active点击切换样式
1.html <div class="filter-nav" v-for="(item,index) in filterData.navTab" :key ...
- vue 实现active点击图片切换
循环条件下: 1.点击函数@click="active(index)" 获取点击的位置 2.讲索引值传给class,点击哪一个则显示哪一个的样式 3.在data添加ins的初始值 ...
- vue点击切换颜色限制个数(用了mui框架)
vue点击切换颜色 只能点击一个 <!doctype html> <head> <meta charset="UTF-8"> <title ...
- vue点击切换样式,点击切换地址栏,点击显示或者隐藏
1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...
- jq demo 轮播图,图片可调用,向左,自动+鼠标点击切换
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- jq demo 轮播图,图片可调用,向上,自动+鼠标点击切换
1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...
- jquery 点击切换div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery——左右按钮点击切换一组图片功能
一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...
- 仿美团外卖,饿了吗 两个ListView联动,左边点击切换右边,右边滑动切换左边
先上效果图: 实现思路: 1.先说右边标题: 首先,右边的数据源集合中的Javabean中含有三个属性name,type,title,而每个条目中会默认含有一个标题. 如果这是第一个条目,就让标题显示 ...
随机推荐
- webpack配置反向代理
devServer: { contentBase: path.resolve(__dirname, "../dev"), compress: true, port: ,//本身的端 ...
- JDK5的新特性
本篇博客内容 一.自动装箱和自动拆箱 二.泛型 三.增强for循环 四.静态导入 五.可变参数 六.枚举 一.自动装箱和自动拆箱 <=返回目录 java有8种基本数据类型 byte.shor ...
- CF543B Destroying Roads 枚举 + 思维 + BFS
Code: #include <bits/stdc++.h> #define ll long long #define setIO(s) freopen(s".in", ...
- [转]Linux下防止进程使用swap及防止OOM机制导致进程被kill掉
首先解释两个概念:swap:在linux里面,当物理内存不够用了,而又有新的程序请求分配内存,那么linux就会选择将其他程序暂时不用的数据交换到物理磁盘上(swap out),等程序要用的时候再读进 ...
- ConcurrentSkipListMap 源码分析
ConcurrentSkipListMap ConcurrentSkipListMap 能解决什么问题?什么时候使用 ConcurrentSkipListMap? 1)ConcurrentSkipLi ...
- CopyOnWriteArrayList 源码分析
CopyOnWriteArrayList CopyOnWriteArrayList 能解决什么问题?什么时候使用 CopyOnWriteArrayList? 1)CopyOnWriteArrayLis ...
- Delphi XE2 之 FireMonkey 入门(1)
Delphi XE2 的 FireMonkey 是跨平台的, 暂时只准备看看它在 Windows 下(我是 32 位 Win7)的应用情况. 很新的东西, 相信有了它, 以后的界面将会更灵活.漂亮, ...
- UI自动化之特殊处理三(日期控件\表格\富文本)
日期控件\表格\富文本也是一些常遇到的需要特殊处理的定位 目录 1.日期控件 2.表格 3.富文本 1.日期控件 第一种:输入框属性为:readonly="readonly" # ...
- vue组件父子间通信之综合练习--假的聊天室
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- LeetCode——141 设计链表
题目: 简单说下思路: 用两个指针,一个跑得快,一个跑得慢(例如一个每次前进两步,一个前进一步),这样只要快指针不会撞上NULL(如果遇到了NULL的情况那么必然不存在环),快指针肯定会和慢指针碰面( ...