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样式

image.png注释: :class="{active:shows1}"就是说当shows1时添加class=active,否则不添加。

2、在methods里边定义方法

效果如下:

image.pngimage.pngimage.png

到此就完成了点击切换效果。

附加:

使用三木运算符实现筛选箭头切换
image.png三木运算符执行方法:如果show==1为真,则显示icon_up.png,否则显示icon_down.png

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

  1. Vue实现active点击切换样式

    1.html <div class="filter-nav" v-for="(item,index) in filterData.navTab" :key ...

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

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

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

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

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

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

  5. jq demo 轮播图,图片可调用,向左,自动+鼠标点击切换

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. jq demo 轮播图,图片可调用,向上,自动+鼠标点击切换

    1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...

  7. jquery 点击切换div

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

  9. 仿美团外卖,饿了吗 两个ListView联动,左边点击切换右边,右边滑动切换左边

    先上效果图: 实现思路: 1.先说右边标题: 首先,右边的数据源集合中的Javabean中含有三个属性name,type,title,而每个条目中会默认含有一个标题. 如果这是第一个条目,就让标题显示 ...

随机推荐

  1. webpack配置反向代理

    devServer: { contentBase: path.resolve(__dirname, "../dev"), compress: true, port: ,//本身的端 ...

  2. JDK5的新特性

    本篇博客内容 一.自动装箱和自动拆箱 二.泛型 三.增强for循环 四.静态导入 五.可变参数 六.枚举 一.自动装箱和自动拆箱  <=返回目录 java有8种基本数据类型  byte.shor ...

  3. CF543B Destroying Roads 枚举 + 思维 + BFS

    Code: #include <bits/stdc++.h> #define ll long long #define setIO(s) freopen(s".in", ...

  4. [转]Linux下防止进程使用swap及防止OOM机制导致进程被kill掉

    首先解释两个概念:swap:在linux里面,当物理内存不够用了,而又有新的程序请求分配内存,那么linux就会选择将其他程序暂时不用的数据交换到物理磁盘上(swap out),等程序要用的时候再读进 ...

  5. ConcurrentSkipListMap 源码分析

    ConcurrentSkipListMap ConcurrentSkipListMap 能解决什么问题?什么时候使用 ConcurrentSkipListMap? 1)ConcurrentSkipLi ...

  6. CopyOnWriteArrayList 源码分析

    CopyOnWriteArrayList CopyOnWriteArrayList 能解决什么问题?什么时候使用 CopyOnWriteArrayList? 1)CopyOnWriteArrayLis ...

  7. Delphi XE2 之 FireMonkey 入门(1)

    Delphi XE2 的 FireMonkey 是跨平台的, 暂时只准备看看它在 Windows 下(我是 32 位 Win7)的应用情况. 很新的东西, 相信有了它, 以后的界面将会更灵活.漂亮, ...

  8. UI自动化之特殊处理三(日期控件\表格\富文本)

    日期控件\表格\富文本也是一些常遇到的需要特殊处理的定位 目录 1.日期控件 2.表格 3.富文本 1.日期控件 第一种:输入框属性为:readonly="readonly" # ...

  9. vue组件父子间通信之综合练习--假的聊天室

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. LeetCode——141 设计链表

    题目: 简单说下思路: 用两个指针,一个跑得快,一个跑得慢(例如一个每次前进两步,一个前进一步),这样只要快指针不会撞上NULL(如果遇到了NULL的情况那么必然不存在环),快指针肯定会和慢指针碰面( ...