快速解决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 相关文章推荐
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
vue+iview动态渲染表格详解
Mar 19 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
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 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
php中的静态变量的基本用法
2014/03/20 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
详解Python的单元测试
2015/04/28 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
自学python的建议和周期预算
2019/01/30 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
python中class的定义及使用教程
2019/09/18 Python
python装饰器使用实例详解
2019/12/14 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
荷兰电脑专场:Paradigit
2018/05/05 全球购物
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
size?爱尔兰官方网站:英国伦敦的球鞋精品店
2019/03/31 全球购物
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
Shell脚本如何向终端输出信息
2014/04/25 面试题
高中数学教学反思
2014/01/30 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
个人道歉信大全
2019/04/11 职场文书