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

刚入门Vue没多久，在制作过程中遇到很多简单实用的小技巧。

没有太多的墨水，直接上代码：

一、先在data里增加一个变量，用来储存当前点击的元素

data() {
  return {
   activeClass: -1, // 0为默认选择第一个，-1为不选择
  };
 },

二、在Template里面的代码，切记在@click方法里面要传index，

<li :class="activeClass == index ? 'active':''" v-for="(item,index) in itemList" :key="index" @click="getItem(index)">
     {{itme.text}}
    </li>

三、点击事件：改变data里面activeClass的值

  getItme(index) {
   this.activeClass = index; // 把当前点击元素的index，赋值给activeClass
  },

四、在style中写上 .active 样式

.active {
 /* background: #eee; */
 color: #1e82d2;
 font-weight: bolder;
}

补充知识：Vue实现非循环active点击切换样式

我就废话不多说了，大家还是直接看代码吧~

<div class="tab_basic">
  <span :class="{to_active:shows==1}" @click="today_a">日</span>
  <span :class="{to_active:shows==2}" @click="today_b">月</span>
  <span :class="{to_active:shows==3}" @click="today_c">年</span>
</div>
<style>
.to_active {background: #409eff!important;color: #fff;}
</style>
然后在method里定义
today_a(){
this.shows = 1;
},
today_b(){
this.shows = 2;
},
today_c(){
this.shows = 3;
},

完事，欢迎小伙伴有更好的方法分享哈~ 希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法

    鼠标移入添加class样式 HTML HTML绑定事件,加入或者移出class为active <div class="col-lg-3 col-xs-6 paddingLeft com_marginBtm10 choosePlan" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)"> 流量套餐 </div> JS 这里除了a

  • vue通过style或者class改变样式的实例代码

    通过style改变样式 <div :style="{ 'min-height': size + 'px' }"></div> <div :style="[{ 'min-height': size + 'px' },{color:'red'}]"></div> <div :style="{ 'opacity': value ? 0.5 : 1 }"></div> 通过class

  • Vue中点击active并第一个默认选中功能的实现

    Vue中点击active并第一个默认选中功能的实现

    在jQuery中: 就是让第一个选中,其他的不选中! 当点击后当前选中,其他不选中. 有一种绕口令:东边的喇嘛买了西边的喇叭 o((⊙﹏⊙))o 在Vue中快速创建与选中 1.遍历出来, 在click中赋值 遍历出来的mx. 2.class进行决定是否显示,一点击就把对应的mx赋到activeName中 3.此时activeName就和mx一模一样的文本,然后返回一个true能显示当前的了 4.把最后一个瑕疵补上, 让第一个默认选中.就是把activeName放一个数值就行了 <template

  • 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实现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点击切换Class变化,实现Active当前样式操作

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

  • 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>

  • vue中点击切换按钮功能之点启用后按钮变为禁用

    vue中点击切换按钮功能之点启用后按钮变为禁用

    实现方法分位三步: 在template中设置2个按钮,通过v-if ,v-show来控制: data中设置按钮的默认值: methods中控制点击按钮切换效果. <template> <el-table :data="tableData" border style="width: 100%"> <el-table-column fixed prop="date" label="日期" width=

  • 关掉vue插件Vetur格式化的时候自动添加的样式操作

    关掉vue插件Vetur格式化的时候自动添加的样式操作

    目录 1 点击左下角设置按钮 2 点击设置到设置界面 3 在搜索栏输入需要查找的配置 4 点击我们想要修改的配置项 5 把默认项prettier修改为vscode-typescript 前言: 刚用Vetur的时候会发现只要格式化就会加什么小括号,冒号之类杂七杂八的标点符号.看着特别别扭,现在手把手教你如何关掉这个功能,傻瓜式教学.专门为小白设计 先打开vscode 1 点击左下角设置按钮 2 点击设置到设置界面 3 在搜索栏输入需要查找的配置 Vetur › Format › Default

  • Vue.js点击切换按钮改变内容的实例讲解

    代码实例: 代码描述:点击切换按钮,来改变显示的内容,切换不同的单位.flag相当于一个开关,控制开关的改变,来切换不同的单位.同样适用于其他的切换内容实例,也可设置按钮点击显示隐藏等. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换改变内容</title> <script src="https://cdn.bo

  • 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点击标签切换选中及互相排斥操作

    单身和已婚不能同时选中,不了解保险和已了解保险不能同时选中. 同时各个标签点击可以取消选择 //html <li> <span class="fill-title">与我相关</span> <div> <van-button v-for="(item, index) in myself" :key="index" @click="checkButton('myself', item.

  • vue toggle做一个点击切换class(实例讲解)

    实例如下所示: <template> <div> <span :class="{'bg-primary text-danger':isA,'bg-success text-white':!isA}" @click="toggle()">AAAAA</span> </div> </template> <script> export default { name: 'hello', da

  • 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}}<

随机推荐