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"> < ...
随机推荐
- day2-python 登录
# username = 'niuhanyang' # 写一个判断登录的程序: # 输入: username # password # 最大错误次数是3次,输入3次都没有登录成功,提示错误次数达到上限 ...
- mac Parallels Desttop 13 win7/win8 无法连接网络
把 “源” 从共享网络改为"Wi-Fi" 在mac 这边点击菜单栏windows图标,选配置(如果没有配置,点控制中心,在点控制中心的齿轮,)选 硬件 找到网络 解锁,上边第一行就 ...
- 装逼图片旋转合成demo
测试背景 bg.jpg 测试图片 a.jpg 结果示例 代码demo <?php $bgImgFileName = 'bg.jpg'; $a = 'a.jpg'; // 初始化 $src = i ...
- python爬虫基础16-cookie在爬虫中的应用
Cookie的Python爬虫应用 Cookie是什么 Cookie,有时也用其复数形式 Cookies,英文是饼干的意思.指某些网站为了辨别用户身份.进行 session 跟踪而储存在用户本地终端上 ...
- python输出mssql 查询结果示例
# -*- coding: utf-8 -*-# python 3.6import pymssql conn=pymssql.connect(host='*****',user='******',pa ...
- 【HIHOCODER 1055】 刷油漆(树上背包)
描述 小Ho有着一棵灰常好玩的树玩具!这棵树玩具是由N个小球和N-1根木棍拼凑而成,这N个小球都被小Ho标上了不同的数字,并且这些数字都是处于1..N的范围之内,每根木棍都连接着两个不同的小球,并且保 ...
- vagrant中的precise64使用静态的能和host所在局域网的其他机器互相通信
vagrant中的precise64使用静态的能和host所在局域网的其他机器互相通信
- Python虚拟机之异常控制流(五)
Python中的异常控制语义结构 在Python虚拟机之异常控制流(四)这一章中,我们考察了Python的异常在虚拟机中的级别上是什么东西,抛出异常这个动作在虚拟机的级别上对应的行为,最后,我们还剖析 ...
- matlab图形handle
- Maven本地库在哪?
Maven的本地存储库是一个本地文件夹,用于存储你的所有项目的依赖项(插件Jars和其他Maven下载的文件).简单的说,当你建立一个Maven项目,所有依赖文件将存储在Maven的本地库. 默认情况 ...