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

  • 更新时间:2022-06-23 14:12:10
  • 编辑:文新翰

首先,直接进入正题,我想要给一个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 axios中文文档知识点概述

    本篇文章主要介绍了详解axios中文文档,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2019-11-12

  • 实例详解Vue基础学习之项目整合及优化

    这篇文章主要给大家介绍了关于Vue基础学习之项目整合及优化的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学

    发布时间:2020-01-27

  • 使用vue实现简单键盘 支持移动端和pc端示例效果

    这篇文章主要介绍了使用vue实现简单键盘的示例(支持移动端和pc端),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2020-02-11

  • Vue.js项目部署到服务器具体做法步骤

    这篇文章给大家介绍了Vue.js项目部署到服务器的详细步骤,既然是部署到服务器,肯定是需要一个云的。具体思路步骤大家可以参考下本文

    发布时间:2021-06-01

  • 实例讲解vue-router传参的两种方式

    Vue Router 是 Vue.js 官方的路由管理器。这篇文章主要介绍了详解vue-router传参的两种方式,需要的朋友可以参考下

    发布时间:2020-02-12

  • vue中assets和static的区别

    这篇文章主要介绍了详解vue2.0 资源文件assets和static的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    发布时间:2020-03-14

  • vue、react等单页面项目应该这样子部署到服务器

    这篇文章主要介绍了vue、react等单页面项目应该这样子部署到服务器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    发布时间:2020-07-16

  • vue在自定义组件中使用v-model的方法

    本篇文章主要介绍了vue如何在自定义组件中使用v-model,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2020-04-26

用户留言