vue动态绑定class选中当前列表变色的方法示例

这个小技巧在工作当中是非常实用而且经常用到的  希望小伙伴儿们能学到。

先看看效果图吧

接下来我们看看怎么实现的吧

在methods中写入一个方法

clickcategory(index){ // 这里我们传入一个当前值
　　this.categoryIndex = index
}

然后需要在data里面注册一下

data() {
   return {
    categoryIndex: 0, //点击当前背景变成白色索引
   }
  },

在css中设置我们当前选中项为active的类名，并给与一个白色的背景颜色

 .active {
  background: #fff
 }

接下来在html中绑定

<li @click="clickCategory(index)" :class="{active:categoryIndex==index}"> <!-- 选中当前动态绑定class -->

</li>

嗯哼  于是乎我们的点击选中当前改变背景色就这样完成了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue添加class样式实例讲解

    vue提供了一个动态添加class的v-bind:class(:class) 对象,可以使用:class进行clas动态的切换.案例中将通过使用:class设置 字体为红色. 1.新建一个html代码页面. 2.在html代码页面创建一个<div>同时添加id为app,并添加一段文本 3.引入vue.js文件.使用<scrtip>标签引入vue文件. 4.创建vue实例.新建一个<script>标签,然后使用new Vue()创建实例. 代码: <script&g

  • vue--点击当前增加class,其他删除class的方法

    如下所示: <div id="app"> <p v-for='(data,key,index) in datas' v-on:click="addClassFun(index)" v-bind:class='{class1:index==qwerqwre}'>{{data.data}}</p> </div> <script> new Vue({ el: '#app', data: { datas: { da

  • 在vue中使用v-bind:class的选项卡方法

    //vue中的选项卡的实现,数据驱动dom,因此需要使用数据,来改变class: 详细见代码实现 <style> ul{overflow: hidden;} ul li{float: left;width: 150px;height: 35px;line-height: 35px;border: 1px solid red;list-style: none;cursor: pointer;} ul li.active{background-color: yellow} </style&g

  • vue根据值给予不同class的实例

    如下所示: <div class="chatBox-kuang" :class="addclass(skin)"> </div> data(){ return{ skin:'' } } onchooseSkin(attr){ this.skin=attr }, 方法一 addclass(i){ switch (i) { case 0: return 'skinA'; case 1: return 'skinB'; case 2: return

  • 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中v-for通过动态绑定class实现触发效果

    vue动态绑定class练习. :class="{ '类名1':条件表达式,'类名2':条件表达式- }" <template> <div class="app-*"> <ul> <li v-for="(item,i) of list" :key="i" class="item" @click="clickIndex=i" :class=&quo

  • vue动态绑定class选中当前列表变色的方法示例

    vue动态绑定class选中当前列表变色的方法示例

    这个小技巧在工作当中是非常实用而且经常用到的  希望小伙伴儿们能学到. 先看看效果图吧 接下来我们看看怎么实现的吧 在methods中写入一个方法 clickcategory(index){ // 这里我们传入一个当前值 this.categoryIndex = index } 然后需要在data里面注册一下 data() { return { categoryIndex: 0, //点击当前背景变成白色索引 } }, 在css中设置我们当前选中项为active的类名,并给与一个白色的背景颜色

  • vue + elementUI实现省市县三级联动的方法示例

    vue + elementUI实现省市县三级联动的方法示例

    本文介绍了vue + elementUI实现省市县三级联动的方法示例,分享给大家,具体如下: 1.首先需要准备省市县json文件,网上有很多可以下载.项目中使用的city.json数据是这样的格式: [ { "value": "110000", "label": "北京市", "children": [ { "value": "110000", "label

  • Electron+vue从零开始打造一个本地播放器的方法示例

    为什么要做? 女朋友工作是音频后期,平常会收集一些音频音乐,需要看音频的频谱波形,每次用au这种大型软件播放音乐看波形,很不方便,看到她这么辛苦,身为程序猿的我痛心疾首,于是,就有了这么一个小软件,软件涉及到的技术主要为electron,vue,node,波形的展示主要通过wavesurfer生成. 从零开始-搭建项目 项目通过vue脚手架搭建的,所以需要安装cli工具,如果已经装了,可以跳过这一步. npm install -g @vue/cli # OR yarn global add @v

  • 基于vue+echarts 数据可视化大屏展示的方法示例

    基于vue+echarts 数据可视化大屏展示的方法示例

    获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也可以直接下载完整版本:开发环境建议下载源代码版本,包含了常见的错误提示和警告. 2) 也可以在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 3) 或者通过 npm 获取 echarts,npm

  • Python使用zip合并相邻列表项的方法示例

    本文实例讲述了Python使用zip合并相邻列表项的方法.分享给大家供大家参考,具体如下: 1>使用zip()函数和iter()函数,来合并相邻的列表项 >>> x [1, 2, 3, 4, 5, 6, 7, 8, 9] >>> zip(*[iter(x)]*2) [(1, 2), (3, 4), (5, 6), (7, 8)] >>> zip(*[iter(x)]*3) [(1, 2, 3), (4, 5, 6), (7, 8, 9)] >

  • Vue中多个元素、组件的过渡及列表过渡的方法示例

    多个元素之间过渡动画效果 多元素之间如何实现过渡动画效果呢?看下面代码 .fade-enter, .fade-leave-to{ opacity: 0; } .fade-enter-active, .fade-leave-active{ transition: opacity 3s; } <div id="root"> <transition name="fade"> <div v-if="show">hell

  • 利用vue组件自定义v-model实现一个Tab组件方法示例

    利用vue组件自定义v-model实现一个Tab组件方法示例

    前言 最近在学习vue,今天看到自定义组件,纠结了一会会然后恍然大悟...官方教程写得不是很详细,所以我决定总结一下.下面话不多说了,来一起看看详细的介绍吧. 效果 先让我们看一下例子的效果吧! v-model 我们知道 v-model 是 vue 里面的一个指令,vue的v-model是一个十分强大的指令,它可以自动让原生表单组件的值自动和你选择的值绑定,它可以用在 input 标签上,来做数据的双向绑定,就像这样: <input v-model="tab"> v-mod

  • Vue 后台管理类项目兼容IE9+的方法示例

    最近项目进入到了第三方集成的环节,集成第三方监控非要用IE,咋办?老板让我将后台管理系统的框架兼容下IE,一直都是在chrome下开发的,也不知道IE下是什么鬼. 目前后台管理系统前端搭建方式 目前系统是用vue-cli@2.0生成的,UI框架使用的是iview,ajax请求使用的是axois,此外就没有什么特殊的npm包了. 需要解决的兼容问题 经过自己的一番测试,目前主要有以下的兼容问题: 在IE下由于没有promise,所以axios不能用了: 在涉及到flex.fixed.absolut

  • vue中各组件之间传递数据的方法示例

    vue中各组件之间传递数据的方法示例

    前言 本文主要给大家介绍了关于vue组件之间传递数据的相关资料,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 作用域 在vue中,组件实例的作用域是孤立的,父组件模板的内容在父组件作用域内编译:子组件模板的内容在子组件作用域内编译.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据. 下面几种方法可以实现组件之间数据的传递. 一.通过prop传递数据 1)在子组件中,使用prop属性,显示的表明,它所需要的数据. 2)在父组件中,需要引用子组件的地方,传入数据.

  • vue.js父组件使用外部对象的方法示例

    最近在碰到有同学问我,vue父组件怎么使用外部对象,具体例子如下: 有组件a: <div @click="onClick">component a</div> // componet a ... methods: { onClick(evt) { // doSomething 这里只能拿到 mouseEvent this.outsideClickHandler(evt); // 调用外部处理函数 } } ... 有组件B,引用组件a,并传入outsideClic

随机推荐