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 设计模式 富有表现力的Javascript(一)
May 26 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
js中call与apply的用法小结
Dec 28 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 Javascript
js定时器实例分享
Dec 20 Javascript
Vue.js学习示例分享
Feb 05 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 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 fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
js option删除代码集合
2008/11/12 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
OpenCV 模板匹配
2019/07/10 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
大学生自我鉴定范文模板
2014/01/21 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
关于逃课的检讨书
2014/01/23 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
2014年学雷锋活动总结
2014/06/26 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS