vue 之循环添加不同class
在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的更多相关文章
- Vue v-for循环添加表单v-model不重复变动的注意事项!
正常添加,v-model,修改所有循环会得到一样的结果! 定义一个users[]的数组,不要定义全局的user,而是要在Vue里面的方法里定义局部的变量添加.
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- vue v-for循环的用法
1.v-for循环普通数组 ①创建vue对象 ② 循环数据 结果: 2.v-for循环对象数组 ① 创建vue实例对象 ② 循环对象数组 结果: 3.v-for循环对象 ①创建vue对象实例 ②循环对 ...
- Vue.js——循环(Java、JSTL标签库、数据库)
一.Vue.js循环 Vue.js循环要使用 v-for 指令. v-for 指令需要以 student in StudentList 形式的特殊语法使用, StudentList 是源数据数组并且s ...
- vue.js循环for(列表渲染)详解
vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...
- 后盾网lavarel视频项目---vue实现动态添加和删除板块
后盾网lavarel视频项目---vue实现动态添加和删除板块 一.总结 一句话总结: 原理就是:列表时根据vue中的videos变量中的元素来遍历的,初始时videos:[{title:'',pat ...
- js循环添加事件的问题
1.需求 给下面每个按钮增加事件 <ul id="list"> <li>按钮1</li> <li>按钮2</li> &l ...
- JS给元素循环添加事件的问题
<ul> <li>男</li> <li>女</li> <li>老</li> <li>少</li&g ...
- JS - 循环添加 DropDownList(Select)
代码: <td style="padding-left: 10px;"> <select id="ddl_picture_3"> < ...
随机推荐
- windows下配置Nginx支持php
编辑配置文件nginx.conf worker_processes 1; events { worker_connections 1024; } http { include mime.types; ...
- python学习博客推荐
https://www.liaoxuefeng.com/
- UVa - 1593 Unix ls(STL)
给你一堆文件名,排序后按列优先的方式左对齐输出. 假设最长文件名长度是M,那么每一列都要有M+2字符,最后一列有M字符. inmanip真NB..orz #include <iostream&g ...
- PAT Basic 1079
1079 延迟的回文数(20 分) 给定一个 k+1 位的正整数 N,写成 ak⋯a1a0 的形式,其中对所有 i 有 0≤ai<10 且 ak>0.N 被称 ...
- Linux网络编程:客户端/服务器的简单实现
一. Socket的基本知识 1. socket功能 Socket层次 Socket实质上提供了进程通信的端点,进程通信之前,双方必须首先各自创建一个端点,否则是没有办法建立联系并相互通信的. 每一个 ...
- UVa 1309 DLX Sudoku
16×16的数独. 看白书学的DLX,有些细节还有待消化,贴个模板先. #include <cstdio> #include <cstring> #include <al ...
- NetCore 2.0 应用程序在centos 7上通过docker发布
一 安装netcore 2.0 SDK 在centos 上面安装netcore 2.0 与window上面是不太一样的,注意,linux是不支持同时安装两个版本的.netcore SDK的,由于我之 ...
- Scala学习-01-变量与类型
Scala运行在jvm之上,可以调用Java类库和与Java框架交互,并将面向对象与面向函数结合在一起. 特点: 1 保留了静态类型检查.安全保障高. 2 函数式编程,更加灵活. 3 运行于jvm之上 ...
- 缓存淘汰算法之FIFO
前段时间去网易面试,被这个问题卡住,先做总结如下: 常用缓存淘汰算法 FIFO类:First In First Out,先进先出.判断被存储的时间,离目前最远的数据优先被淘汰. LRU类:Least ...
- 文件拷贝后无法编辑,用chown修改所有者和分组
文件拷贝后无法编辑,chmod查看权限,发现当前用户不在文件里的所有者或所有组你,需用chwon修改拥有者和分组. 实例1:改变拥有者和群组 chown mail:mail log2012.log - ...