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"> < ...
随机推荐
- 03大端和小端(Big endian and Little endian)
1.大端和小端的问题 对于整型.长整型等数据类型,Big endian 认为第一个字节是最高位字节(按照从低地址到高地址的顺序存放数据的高位字节到低位字节),而 Little endian 则相反 ...
- 20181205(模块循环导入解决方案,json&pickle模块,time,date,random介绍)
一.补充内容 循环导入 解决方案: 1.将导入的语句挪到后面. 2.将导入语句放入函数,函数在定义阶段不运行 #m1.pyprint('正在导入m1') #②能够正常打印from m2 imp ...
- LeetCode(260) Single Number III
题目 Given an array of numbers nums, in which exactly two elements appear only once and all the other ...
- ACM 贪心算法总结
贪心算法的本质: 就是当前状态的最优解,它并不考虑全局. 什么是当前状态的最优解? 成本问题? https://www.cnblogs.com/xuxiaojin/p/9400892.html (po ...
- PHP GD库---之头像合成九宫格
public function createMosaicGroupAvatar($pic_list = array(), $bg_w = 396, $bg_h = 396) { if (!$pic_l ...
- Python属性描述符(一)
描述符是对多个属性运用相同存取逻辑的一种方式,,是实现了特性协议的类,这个协议包括了__get__.__set__和__delete__方法.property类实现了完整的描述符协议.通常,可以只实现 ...
- virtual 三种用法
virtual用法一 #include using namespace std;class A{public: virtual void display(){ cout<<& ...
- NetCore 2.0 应用程序在centos 7上通过docker发布
一 安装netcore 2.0 SDK 在centos 上面安装netcore 2.0 与window上面是不太一样的,注意,linux是不支持同时安装两个版本的.netcore SDK的,由于我之 ...
- 04_ThreadLocal整合事务操作
文章导读: 本文主要讲解了如何在没有框架情况下如何解决Dao的事务问题, 重点理解Connection存放到WeakReference中为什么垃圾回收的时候Connection不回收 视频与源码下载: ...
- MyCAT+MySQL 搭建高可用企业级数据库集群——第3章 MyCat核心配置讲解
3-1 章节综述 3-2 常用配置文件间的关系 3-3 server.xml配置详解 3-4 log4j2.xml配置文件 3-5 rule.xml 3-6 常用分片算法(上) 3-7 常用分片算法( ...