在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. 怎样处理jmeter中文乱码

    jmeter返回 中文乱码: 1.在jmeter的bin目录下,找到jmeter的配置文件,jmeter.properties,然后把 sampleresult.default.encoding=UT ...

  2. c# 输出不同时间的格式

    C#时间/日期格式大全,C#时间/日期函数大全 有时候我们要对时间进行转换,达到不同的显示效果 默认格式为:2005-6-6 14:33:34 如果要换成成200506,06-2005,2005-6- ...

  3. leetcode-21-knapsack

    322. Coin Change Write a function to compute the fewest number of coins that you need to make up tha ...

  4. stm32F4中断分析-HAL库

    详细可以参考: STM32使用HAL库操作外部中断——实战操作 https://www.cnblogs.com/wt88/p/9624103.html /** ******************** ...

  5. Nordic Collegiate Programming Contest 2015​ D. Disastrous Downtime

    You're investigating what happened when one of your computer systems recently broke down. So far you ...

  6. Linux网络文件系统NFS详解

    什么是文件系统,NFS文件系统又是什么? 简单的说,文件系统就是通过软件对磁盘上的数据进行组织和管理的一种机制,对其的一种封装或透视. 你女朋友拍了美美的暧昧照片,放一个文件夹里发送给了A服务器,当你 ...

  7. Leetcode36--->Valid Sudoku(判断给定的数独是否有效)

    题目:给定一个数独,某些部分已经被填上了数字,其余空的地方用‘.’表示:判断给定的数独是否有效: 数独规则: 每一行不能有重复的数字:每一列不能有重复的数字:将数独框划分为三行三列,没9个小方格不能有 ...

  8. xml编辑无提示?这么破!

    在学习testng这个单元测试框架时,如果咱们碰到了编辑测试套件xml,不提示的情况(有提示方便咱们学习,并且testng的测试套件定义必须按照他的dtd文件约束来),咱们可以按照下面的步骤去解决这个 ...

  9. 利用bochs调试Linux 0.11内核

    引导程序调试软件bochs,跟配套的linux0.11内核img下载地址分别是: http://sourceforge.net/projects/bochs/http://www.oldlinux.o ...

  10. 01 Java 代码是怎么运行的

    Java代码运行的方式 1:在开发工具中运行 2:双击 jar 文件运行 3:在命令行中运行 4:在网页中运行 上述运行方式都离不开 JRE,也就是 Java 运行时环境.实际上 JRE 仅包含运行 ...