在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. pip 常用命令

    列出已安装包 pip freeze or pip list 安装包 在线安装包 pip install <package name> 或 pip install -r requiremen ...

  2. SEO 优化

    1.什么是SEO优化: 简单的来说就是了解搜索引擎的排名规则,投机所好,让我们的网站在搜索引擎上得到靠前的排名,获取更多流量的一种方式. 2.SEO优化-衡量标准 关键词的排名--核心关键词的效果 收 ...

  3. url,href,src区别

    URL(Uniform Resource Locator) 统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的URL ...

  4. Flask初学者:Jinja2模板

    Python的Jinja2模板,其实就是在HTML文档中使用控制语句和表达语句替换HTML文档中的变量来控制HTML的显示格式,Python的Jinja2模板可以更加灵活和方便的控制HTML的显示,而 ...

  5. 在linux下安装并运行scrapyd

    系统:centos7.4 安装scrapyd:pip isntall scrapyd 因为我腾讯云上是python2与python3并存的 所以我执行的命令是:pip3 isntall scrapyd ...

  6. 《流畅的python》读书笔记,第一章:python数据模型

    这本书上来就讲了魔法方法,也叫双下方法.特殊方法,通过两个例子对让读者了解了双下方法的用法,更重要的是,让我一窥Python的语言风格和给使用者的自由度. 第一个例子:一摞Python风格的纸牌: i ...

  7. JAVA基础篇—Servlet小结

    一.get请求和post请求的区别: 1.get请求是通过url传递参数,post请求是通过请求体传递参数的 2.get请求最多允许传递255个字符,对长度有限制,所以数据比较大的时候我们使用post ...

  8. 并查集:CDOJ1593-老司机破阵 (假的并查集拆除)

    老司机破阵 Time Limit: 4500/1500MS (Java/Others) Memory Limit: 65535/65535KB (Java/Others) Problem Descri ...

  9. ACM-ICPC 2018 徐州赛区网络预赛 F. Features Track

    262144K   Morgana is learning computer vision, and he likes cats, too. One day he wants to find the ...

  10. Setting title-center on "< h1> " element on Android does not work, fix

    app.scss: h1.title-center{ text-align: center!important; }