快速解决vue动态绑定多个class的官方实例语法无效的问题
更新时间：2018年09月05日 09:58:15 作者：超神冉
今天小编就为大家分享一篇快速解决vue动态绑定多个class的官方实例语法无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
首先，直接进入正题，我想要给一个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的官方实例语法无效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue之Vue.use的使用场景，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了VUE预渲染及遇到的坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
vue-cli是一个官方发布vue.js项目脚手架,使用vue-cli可以快速创建vue项目。本文介绍了vue-cli4.5.x快速搭建项目，感兴趣的可以了解一下2021-05-05
在如今，很多网页已经可以手动切换明亮模式和黑暗模式，网页的主题切换已经成为了一个常用的需求，因此，本文将从常见框架的处理方式总结一些相关的操作，对vue ui框架主题切换功能感兴趣的朋友跟随小编一起看看吧2022-12-12
这篇文章主要介绍了vue 组件基础知识的相关资料，帮助大家更好的理解和使用vue的组件，感兴趣的朋友可以了解下2021-01-01
这篇文章主要为大家介绍了vue之数据代理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章给大家带来了Vue.js 踩坑记之双向绑定问题，非常不错，具有参考借鉴价值，感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
Vue+axios+WebApi+NPOI导出Excel文件实例方法
在本篇文章里小编给大家整理关于Vue+axios+WebApi+NPOI导出Excel文件的知识点以及实例代码，需要的朋友们参考下。2019-06-06
这篇文章主要介绍了7个实用的Vue开发技巧文。中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，下面我们来一起学习一下吧2019-05-05
这篇文章主要介绍了@error函数vue图片加载失败空白页解决方案，有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
最新评论