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 兼容firefox的一些问题
May 21 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
关于URL中的特殊符号使用介绍
Nov 03 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
JS实现数组深拷贝的方法分析
Mar 06 Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
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
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
JS实现拼图游戏
2021/01/29 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
同学聚会主持词
2014/03/18 职场文书
文案策划专业自荐信
2014/07/07 职场文书
复试通知单模板
2015/04/24 职场文书