在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. 动态设置html的title

    使用vue前端框架做,竟然丢弃了很多javascript和html的东西了..动态设置title的方法: 1.使用vue的自定义指令 <div v-title>{{htmltitle}}& ...

  2. php 常用函数集合(持续更新中...)

    php 常用函数集合 在php的开发中,巧妙的运用php自带的一些函数,会起到事半功倍的效果,在此,主要记录一些常用的函数 1.time(),microtime()函数 time():获取当前时间戳 ...

  3. Linux 安装Nginx+PHP+MySQL教程

    一.安装nginx 通过yum安装openssl: yum -y install openssl openssl-devel 通过yum安装pcre: yum -y install pcre-deve ...

  4. pyqt设计

    pyqt是python设计GUI的第三方包 作为一个小白,我觉得这篇博客贼好,我就是按照这个博客写的. 这个博客一共分5步,每一步都特别详细. pyqt 打包exe时遇到的问题(我的python环境是 ...

  5. Linux下的硬件驱动——USB设备(转载)

    usb_bulk_msg函数 当对usb设备进行一次读或者写时,usb_bulk_msg 函数是非常有用的; 然而, 当你需要连续地对设备进行读/写时,建议你建立一个自己的urbs,同时将urbs 提 ...

  6. HDU 5025 Saving Tang Monk(状态转移, 广搜)

    #include<bits/stdc++.h> using namespace std; ; ; char G[maxN][maxN], snake[maxN][maxN]; ]; int ...

  7. The 2018 ACM-ICPC Chinese Collegiate Programming Contest Take Your Seat

    /* 证明过程如下 :第一种情况:按1到n的顺序上飞机,1会随意选一个,剩下的上去时若与自己序号相同的座位空就坐下去,若被占了就也会随意选一个.求最后一个人坐在应坐位置的概率 */ #include ...

  8. HDU 3639 SCC Hawk-and-Chicken

    求SCC缩点,统计出每个SCC中的点的个数. 然后统计能到达u的最多的点的个数,可以反向建图,再dfs一遍统计出来. 最后说一下,有必要开一个标记数组,因为测试数据中有重边,结果无限WA. #incl ...

  9. (转)全网最!详!细!tarjan算法讲解

    byhttp://www.cnblogs.com/uncle-lu/p/5876729.html 全网最详细tarjan算法讲解,我不敢说别的.反正其他tarjan算法讲解,我看了半天才看懂.我写的这 ...

  10. Mysql 安装及MySQL-python 问题

    今天遇到了个低级问题: EnvironmentError:mysql_config not found 网上谷歌了一圈发现没用,静下来想的时候才发现新电脑没安装Mysql,吐血 后面再去官网上下载My ...