快速解决vue动态绑定多个class的官方实例语法无效的问题


Posted in Javascript onSeptember 05, 2018

首先,直接进入正题,我想要给一个dom绑定多个class,而且是动态绑定,这个时候可以用v-bind简写可以写为“ :”冒号,我查了官方的语法,

具体如下:

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

其中第2行和第3行都是采用了数组语法,所以放到了我本人的代码中就是这样写

<a :class="[{ active : hash==='all' }, nav-link]" href="#/all" rel="external nofollow" >全部任务</a>

不幸的是并没有任何卵用,这里的nav-link这个class是固定的不会变的,active这个class需要根据条件来判断是否要加入。

后来查了很多资料也没有解决,最后自己对象写法就成功了,目前看到网上没有解决的案列,所以分享出来。

具体如下:

<a :class="{ 'active': hash==='finish','nav-link':true}" href="#/finish" rel="external nofollow" >已完成</a>

有疑问的可以在评论中提出或者我有错误的也可以说一下。

以上这篇快速解决vue动态绑定多个class的官方实例语法无效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
jquery常用特效方法使用示例
Apr 25 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 Javascript
JavaScript 巧学巧用
May 23 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
vue登录路由验证的实现
Dec 13 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
javascript实现时钟动画
Dec 03 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 #jQuery
vue中动态添加class类名的方法
Sep 05 #Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 #Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 #Javascript
vue 监听屏幕高度的实例
Sep 05 #Javascript
Vue-Router的使用方法
Sep 05 #Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 #Javascript
You might like
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
初识ThinkPHP控制器
2016/04/07 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
layui实现数据分页功能
2019/07/27 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
Python中字典的基础知识归纳小结
2015/08/19 Python
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
用Python实现KNN分类算法
2017/12/22 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
介绍一些UNIX常用简单命令
2014/11/11 面试题
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
网络编辑岗位职责
2014/03/18 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
股东合作协议书
2014/09/12 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
安全生产感想
2015/08/07 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL