<div class="wrap" :class="{active:index==current}"></div>

<div class="wrap" :class="index==current？’active':''"></div>//或者

<div class="wrap" :class="index==current&&’active'"></div>//或者

vue中动态class写法的更多相关文章

  1. 周记4——vue中动态添加图片无效、build上线后background-image路径问题

    又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...

  2. vue中动态引入图片为什么要是require， 你不知道的那些事

    相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...

  3. Vue 中动态添加class（使用v-bind:class）

    今天在Vue中动态修改类名,元素的样式就是不改变,类名也没有加上去,里面的问题具体我还是不太清楚,有可能是因为自己不认真,把 :class= 后面的内容的格式给整错了,下面将正确的做法记录一下,便于以 ...

  4. vue中动态添加div

    知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...

  5. vue中动态加载img

    想实现动态加载图片,当点击“首页”时,图片变色 代码如下: <mt-tabbar v-model="selected" fixed class="border-1p ...

  6. vue中动态样式不起作用？ scoped了解一下

    vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped

  7. vue中动态加载组件+开发者模式+JS参数值传递和引用传递

    今天写vue里面通过接口反参动态加载组件时候 跟着同学...学习到了 一.先说说vue 内置组件 component 的用法 component组件可以来专门用来进行组件的切换,使用is来绑定你的组件 ...

  8. Vue中动态添加多个class

    vue中可以通过 :class=""这样来根据一定的条件来动态添加class,但是有时候需要判断的条件比较多,需要动态添加的class也比较多,这个时候其实也很简单 先看一下示例: ...

  9. Vue中动态（import 、require）显示img图片

    vue中,经常会遇到显示图片的问题, 如果是一个普通组件的话,那么这样就可以了 <img src="../assets/images/avtor.jpg" width=&qu ...

随机推荐

  1. Hibernate 数据库方言配置；no dialect mapping for jdbc type:-9；生僻字

    最近因为生僻字在界面上显示为?: 主要原因是该字段在数据库中就是varchar类型,显示的就是?:如䶮(yan):现把varchar类型改为nvarchar类型:数据中能够正常显示: 但是Spring ...

  2. git reset三种模式

    reset三种模式区别和使用场景 区别: --hard:重置位置的同时,直接将 working Tree工作目录. index 暂存区及 repository 都重置成目标Reset节点的內容,所以效 ...

  3. 简单的requestAnimationFrame动画

    html部分 <div id="test" style="width:1px;height:17px;background:#0f0;">0%< ...

  4. oracle-ORA-27102错误

    out of memory HP-UX Error: 12: Not enough space ORA-30019: Illegal rollback Segment operation in Aut ...

  5. 原生js复习1.0

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. osgi实战学习之路:4.Bundle

    </pre></h1><h1 style="margin:0 0 0 40px; border:none; padding:0px"><p ...

  7. Oracle（ERROR SP2-0642）

    阅读目录 报错信息 解决方法 回到顶部 报错信息 ERROR SP2-0642 回到顶部 解决方法 [oracle@oradb]$ sqlplus / as sysdba SP2-0642: SQL* ...

  8. mysql LIMIT 子句用法及原理

    使用查询语句的时候,经常要返回前几条或者中间某几行数据,这个时候怎么办呢?不用担心,已 经为我们提供了这样一个功能. LIMIT 子句可以被用于强制 SELECT 语句返回指定的记录数.LIMIT 接 ...

  9. laravel进阶系列--通过事件和事件监听实现服务解耦

    简介 Laravel 事件提供了简单的观察着模式实现,允许你订阅和监听应用中的事件.事件类通常存放在 app/Events 目录. 监听器存放在 app/Listeners. 如果你在应用中没有看到这 ...

  10. linux扫盲之CPU模式

    相信研究linux的大大都知道linux有实模式.保护模式.虚拟模式三种. 不多说,拷贝黏贴!  80386开始,cpu有三种工作方式:实模式,保护模式和虚拟8086模式.只有在刚刚启动的时候是rea ...