在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. C#基础-数组-ArrayList

    数组ArrayList using System.Collections; //表示引入集合的命名空间 数组ArrayList容量本身是不固定的,根据存储的数据动态变化 // 声明一个ArrayLis ...

  2. salt常用模块

    salt 常用命令整理     转载:https://www.cnblogs.com/aslongas/p/6964890.html salt 常用命令整理 ***********模块******** ...

  3. vue 配置多页面应用

    前言: 本文基于vue 2.5.2, webpack 3.6.0(配置多页面原理类似,实现方法各有千秋,可根据需要进行定制化) vue 是单页面应用.但是在做大型项目时,单页面往往无法满足我们的需求, ...

  4. Vue实例和生命周期

    创建一个Vue实例 每个Vue应用都是通过Vue函数创建一个新的Vue实例开始: var vm = new Vue({ //选项 }) 数据与方法 当一个Vue实例被创建时,它向Vue的响应式系统中加 ...

  5. 字符串:HDU5371-Hotaru's problem(manacher 的应用)

    Hotaru's problem Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Pr ...

  6. Linux学习-什么是 X Window System

    Unix Like 操作系统不是只能进行服务器的架设而已,在美编.排版.制图.多媒体应用上也是有其 需要的. 这些需求都需要用到图形接口 (Graphical User Interface, GUI) ...

  7. selenium2元素定位Xpath和cssSelector

    Selenium2中元素有以下几种定位方法, 常用的有Id,xpath, cssSelector XPATH介绍: XPATH是一种选择器 XPATH在firefox中用firepath验证 XP ...

  8. Educational Codeforces Round 2 Edge coloring of bipartite graph

    题意: 输入一个二分图,用最少的颜色数给它的每条边染色,使得同一个顶点连的边中颜色互不相同. 输出至少需要的颜色数和任意一种染色方案. 分析: 证明不会,只说一下(偷瞄巨巨代码学到的)做法. 假设点的 ...

  9. jenkins 之 Android 打包及上传至蒲公英

    准备条件 iMAC,非必须(如果是 安卓 和 苹果 可以在同一台电脑上打包则要 Mac OS 系统的电脑,如果是只是给安卓打包 windows 电脑也是可以的, window 下 需要把 ls 换成 ...

  10. [POJ 1001] Exponentiation C++解题报告 JAVA解题报告

        Exponentiation Time Limit: 500MS   Memory Limit: 10000K Total Submissions: 126980   Accepted: 30 ...