Vue实现active点击切换方法

循环的情况：

1、点击时传入index索引（获取当前点击的是哪个）

@click="active(index)"

2、将索引值传入class（索引等于几就第几个添加active类）

:class="{active:index==ins}"

3、在data里边添加ins：0（表示默认第一个添加active类）

data{ ins：0 }

4、最后在methods里边添加方法

ctive (num) {
this.ins=num
}

非循环的情况：

1、在标签内写入点击事件和添加的class样式

注释： :class="{active:shows==1}"就是说当shows==1时添加class=active，否则不添加。

2、在methods里边定义方法

效果如下：

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

附加：

使用三木运算符实现筛选箭头切换

以上这篇Vue实现active点击切换方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • Vue实现点击后文字变色切换方法
  • 详解使用vue实现tab 切换操作
  • Vue.js组件tabs实现选项卡切换效果
  • Vue.js组件tab实现选项卡切换
  • Vue.js tab实现选项卡切换
赞 (0)

相关推荐

  • Vue实现点击后文字变色切换方法

    这里用文字举例,图片切换的原理也是一样的 大概思路是:用两个class相同的span分别是切换前后的文字,class相同主要是为了变换前后的文字位置相同.然后用click事件控制它们的显隐. 代码如下: HTML: <span class="response" v-show="!showCommentInput" @click="showCommentInput = !showCommentInput">回复</span>

  • Vue.js tab实现选项卡切换

    本文为大家分享了Vuejs 组件化开发tab组件实例,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/index.css" rel=&quo

  • 详解使用vue实现tab 切换操作

    在使用jQuery类库实现tab功能时,是获取鼠标在mousenter或click时的index值,然后切换到当前的标题和内容,把其他的标题和内容的状态去掉: $('.tab .title').find('.item') .removeClass('current').eq(index).addClass('current'); // 为index位置的title添加current $('.tab .content').find('.item') .hide().eq(index).show()

  • Vue.js组件tabs实现选项卡切换效果

    Vue.js组件tabs实现选项卡切换效果

    今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦. 调用示例: <template> <div class="tabs-contents"> <!-- 调用tabs组件 --> <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'> <di

  • Vue.js组件tab实现选项卡切换

    Vue.js组件tab实现选项卡切换

    本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding: 0;margin:

  • Vue实现active点击切换方法

    循环的情况: 1.点击时传入index索引(获取当前点击的是哪个) @click="active(index)" 2.将索引值传入class(索引等于几就第几个添加active类) :class="{active:index==ins}" 3.在data里边添加ins:0(表示默认第一个添加active类) data{ ins:0 } 4.最后在methods里边添加方法 ctive (num) { this.ins=num } 非循环的情况: 1.在标签内写入点击

  • vue中选项卡点击切换且能滑动切换功能的实现代码

    具体代码如下所述: <div> <div class="navlist"> <ul> <li class="navli" v-for="(item,index) in navList" :class="{'activeT':nowIndex===index}" @click="tabClick(index)"><i>{{item.name}}<

  • vue卡片式点击切换图片组件使用详解

    vue卡片式点击切换图片组件使用详解

    本文实例为大家分享了vue卡片式点击切换图片组件,供大家参考,具体内容如下 因为公司业务的问题,最近在写vue项目,有了一个卡片图片的点击的需求,自己又不想写动画效果,就偷个懒,采用vue是以数据驱动的原理,写了一个不太完整的vue组件,为了简单,就直接上代码吧 全部代码 未进行props传参设置,以后完善(简单最好嘛) <template> <!-- *以数据驱动的card式展示图片(无动画效果) * --> <div class="cardBanner"

  • Vue点击切换Class变化,实现Active当前样式操作

    刚入门Vue没多久,在制作过程中遇到很多简单实用的小技巧. 没有太多的墨水,直接上代码: 一.先在data里增加一个变量,用来储存当前点击的元素 data() { return { activeClass: -1, // 0为默认选择第一个,-1为不选择 }; }, 二.在Template里面的代码,切记在@click方法里面要传index, <li :class="activeClass == index ? 'active':''" v-for="(item,ind

  • Vue 菜单栏点击切换单个class(高亮)的方法

    步骤: 遍历对象(goods)获取菜单栏每一项的对象(item)和下标(index) 添加点击事件toggle(),传入下标参数:@click="fn1();fn2()" 动态切换classname::class="{'active':index ==checkindex }"> (class赋予对应下标值的DOM) ps:该方法直接切换class,不需要手动添加清除其他非动态DOM的class html <ul> <li v-for=&qu

  • Vue点击切换颜色的方法

    如下所示: <template> <div> <div v-for="(list,index) in siYuan" class="aa" :class="{ red:changeRed == index}" @click="change(index)">{{list.a}}</div> </div> </template> <script>

  • Vue2.0点击切换类名改变样式的方法

    1.使用index <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible

  • vue实现样式之间的切换及vue动态样式的实现方法

    vue实现样式之间的切换及vue动态样式的实现方法

    前言 既然我们选择了vue,那么在做东西时就不要想着去操作dom,所有的都交给vue来解决. 下面来说一个很简单但是很常用的效果,可能人人都会用到这样的需求 请看下图 导航栏的样式切换功能,如果我们使用jquery之类的东西来写,可能要写好多代码,那么我们用vue呢, 代码如下 html 附上vue中style与class绑定API <div id="wrap" class="box"> <div v-for="(list,index)

  • vue实现a标签点击高亮方法

    如下所示: <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--<link hre

随机推荐