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


Posted in Javascript onDecember 19, 2018

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

先看看效果图吧

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>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 Javascript
js指定日期增加指定月份的实现方法
Dec 19 #Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 #Javascript
关于node-bindings无法在Electron中使用的解决办法
Dec 18 #Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 #Javascript
JS监听滚动和id自动定位滚动
Dec 18 #Javascript
JS实现的tab页切换效果完整示例
Dec 18 #Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 #Javascript
You might like
php array_unique之后json_encode需要注意
2011/01/02 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
javascript定义函数的方法
2010/12/06 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
Python中的localtime()方法使用详解
2015/05/22 Python
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
Python原始套接字编程实例解析
2020/01/29 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
个人教师自我评价范文
2013/12/02 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
假释思想汇报范文
2014/10/11 职场文书
走近毛泽东观后感
2015/06/04 职场文书
陪护人员误工证明
2015/06/24 职场文书
2019新员工心得体会
2019/06/25 职场文书
MySQL池化框架学习接池自定义
2022/07/23 MySQL