在vue中按条件为class动态添加直接使用:class="[{ active: isActive }, errorClass]"之类的表达式就可以

但是如果我们要为一个循环列表按条件添加不同的class又如何写呢

其实也很简单,我们只要把class按字符串拼接起来就可以了

<div class="section" :class="'pages'+item.activeClass" v-for="(item,index) in anchors">
</div> data(){
anchors: [
{
page:'page1',
activeClass:'1',
},
{
page:'page2',
activeClass:'2',
},
{
page:'page3',
activeClass:'3',
}
],
}

vue 之循环添加不同class的更多相关文章

  1. Vue v-for循环添加表单v-model不重复变动的注意事项!

    正常添加,v-model,修改所有循环会得到一样的结果! 定义一个users[]的数组,不要定义全局的user,而是要在Vue里面的方法里定义局部的变量添加.

  2. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  3. vue v-for循环的用法

    1.v-for循环普通数组 ①创建vue对象 ② 循环数据 结果: 2.v-for循环对象数组 ① 创建vue实例对象 ② 循环对象数组 结果: 3.v-for循环对象 ①创建vue对象实例 ②循环对 ...

  4. Vue.js——循环(Java、JSTL标签库、数据库)

    一.Vue.js循环 Vue.js循环要使用 v-for 指令. v-for 指令需要以 student in StudentList 形式的特殊语法使用, StudentList 是源数据数组并且s ...

  5. vue.js循环for(列表渲染)详解

    vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

  6. 后盾网lavarel视频项目---vue实现动态添加和删除板块

    后盾网lavarel视频项目---vue实现动态添加和删除板块 一.总结 一句话总结: 原理就是:列表时根据vue中的videos变量中的元素来遍历的,初始时videos:[{title:'',pat ...

  7. js循环添加事件的问题

    1.需求 给下面每个按钮增加事件 <ul id="list"> <li>按钮1</li> <li>按钮2</li> &l ...

  8. JS给元素循环添加事件的问题

    <ul> <li>男</li> <li>女</li> <li>老</li> <li>少</li&g ...

  9. JS - 循环添加 DropDownList(Select)

    代码: <td style="padding-left: 10px;"> <select id="ddl_picture_3"> < ...

随机推荐

  1. 03大端和小端(Big endian and Little endian)

    1.大端和小端的问题 ​ 对于整型.长整型等数据类型,Big endian 认为第一个字节是最高位字节(按照从低地址到高地址的顺序存放数据的高位字节到低位字节),而 Little endian 则相反 ...

  2. 20181205(模块循环导入解决方案,json&pickle模块,time,date,random介绍)

    一.补充内容 循环导入 解决方案: 1.将导入的语句挪到后面. ​ 2.将导入语句放入函数,函数在定义阶段不运行 #m1.pyprint('正在导入m1')   #②能够正常打印from m2 imp ...

  3. LeetCode(260) Single Number III

    题目 Given an array of numbers nums, in which exactly two elements appear only once and all the other ...

  4. ACM 贪心算法总结

    贪心算法的本质: 就是当前状态的最优解,它并不考虑全局. 什么是当前状态的最优解? 成本问题? https://www.cnblogs.com/xuxiaojin/p/9400892.html (po ...

  5. PHP GD库---之头像合成九宫格

    public function createMosaicGroupAvatar($pic_list = array(), $bg_w = 396, $bg_h = 396) { if (!$pic_l ...

  6. Python属性描述符(一)

    描述符是对多个属性运用相同存取逻辑的一种方式,,是实现了特性协议的类,这个协议包括了__get__.__set__和__delete__方法.property类实现了完整的描述符协议.通常,可以只实现 ...

  7. virtual 三种用法

    virtual用法一 #include using namespace std;class A{public:     virtual  void  display(){  cout<<& ...

  8. NetCore 2.0 应用程序在centos 7上通过docker发布

    一  安装netcore 2.0 SDK 在centos 上面安装netcore 2.0 与window上面是不太一样的,注意,linux是不支持同时安装两个版本的.netcore SDK的,由于我之 ...

  9. 04_ThreadLocal整合事务操作

    文章导读: 本文主要讲解了如何在没有框架情况下如何解决Dao的事务问题, 重点理解Connection存放到WeakReference中为什么垃圾回收的时候Connection不回收 视频与源码下载: ...

  10. MyCAT+MySQL 搭建高可用企业级数据库集群——第3章 MyCat核心配置讲解

    3-1 章节综述 3-2 常用配置文件间的关系 3-3 server.xml配置详解 3-4 log4j2.xml配置文件 3-5 rule.xml 3-6 常用分片算法(上) 3-7 常用分片算法( ...