当前位置:主页 > vue.js教程 >

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

发布:2022-06-23 14:12:10 169


为找教程的网友们整理了vue相关的编程文章,网友菱睿好根据主题投稿了本篇教程内容,涉及到vue、动态绑定、class相关内容,已被168网友关注,下面的电子资料对本篇知识点有更加详尽的解释。

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

    发布:2019-11-12

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


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

    发布:2020-01-27

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


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

    发布:2020-02-11

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


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

    发布:2021-06-01

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


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

    发布:2020-02-12

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


  • vue中assets和static的区别

    发布:2020-03-14

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


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

    发布:2020-07-16

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


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

    发布:2020-04-26

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


网友讨论