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 相关文章推荐
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
Javascript获取background属性中url的值
Oct 17 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
vue给组件传递不同的值方法
Sep 29 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
Node.js API详解之 zlib模块用法分析
May 19 Javascript
js实现双人五子棋小游戏
May 28 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 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
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
php基本函数汇总
2015/07/09 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
js类中的公有变量和私有变量
2008/07/24 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
使用js画图之饼图
2015/01/12 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
Python操作json数据的一个简单例子
2014/04/17 Python
python实现微信小程序自动回复
2018/09/10 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
Python谱减法语音降噪实例
2019/12/18 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
西安交大自主招生自荐信
2014/01/27 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
高三毕业感言
2015/07/30 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书