在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. manjaro kde tim QQ

    deepin-wine-tim

  2. Python学习笔记:configparser(INI格式配置文件解析)

    在平时的开发中感觉INI格式的配置文件使用还是挺需要的,有时会使用一个单独的py来存放一些常量或者配置项,大多时候这样倒是挺好用的,但是如果某些配置项需要在运行时由用户来修改指定,比如很多app在关闭 ...

  3. LeetCode(258) Add Digits

    题目 Given a non-negative integer num, repeatedly add all its digits until the result has only one dig ...

  4. LightOj:1422-Halloween Costumes

    传送门:http://www.lightoj.com/volume_showproblem.php?problem=1422 Halloween Costumes problem descriptio ...

  5. 2015四川省赛 D Vertex Cover 搜索

    题意: 给出一个\(n\)个点\(m\)条边的无向图,现在要给若干个点染色,使得每条边都至少邻接一个被染色的顶点.问至少要给多少各点染色才能满足条件. 分析: 注意到题目中有一个很特殊的条件: 对于图 ...

  6. poj:1985:Cow Marathon(求树的直径)

    Cow Marathon Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 5496   Accepted: 2685 Case ...

  7. luogu1939 【模板】矩阵加速(数列)

    upd:现在推荐使用一个长度为 \(n\) 的一维向量.若状态矩阵 \(F\) 对下一时间的状态矩阵 \(F'\) 有影响,则 \(F'=FA\) 中的 转移矩阵 \(A\) 的赋值方法是: 若状态矩 ...

  8. 浅析win32 Win64 x86 x64 区别 及Eclipse启动报Java was started but returned exit code=13 错误

    win32.x86_64是64位 X86就是  32位系统 X64 就是64位系统 最好记得方法就是带有64的就是64位,其余都是32位 为什么要讲这个呢? 如果是绿色版本的eclipse,在打开ec ...

  9. Leetcode27--->Remove Element(移除数组中给定元素)

    题目:给定一个数组array和一个值value,移除掉数组中所有与value值相等的元素,返回新的数组的长度:要求:不能分配额外的数组空间,且必须使用原地排序的思想,空间复杂度O(1); 举例: Gi ...

  10. shutil——高级的 文件、文件夹、压缩包 处理模块

    高级的 文件.文件夹.压缩包 处理模块 shutil.copyfileobj(fsrc, fdst[, length])复制文件内容(不包含元数据)从类文件对象src到类文件对dst.可选参数leng ...