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"> < ...
随机推荐
- Ubuntu 下安装mysqlclient报错
pip3 install mysqlclient 报错信息 问题描述: Complete output from command python setup.py egg_info: /bin/sh: ...
- Python: simple drawings
import cv2; # OpenCV Python import numbers; import numpy as np; import math; import matplotlib; impo ...
- hdu 4565
Problem Description A sequence Sn is defined as:Where a, b, n, m are positive integers.┌x┐is the cei ...
- C语言指针分析
/*************1*************/ int p; //p是一个普通的整型变量. /*************2*************/ int *p; //p与*结合,说明 ...
- ghost模板总结
ghost模板的二次开发相对容易,附文档: http://themes.ghost.org/v0.6.0/docs/meta_title 这里有各行变量的说明. {{#is "home&qu ...
- String的getBytes()方法
这是一篇转帖: 本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/maxracer/archive/2010/12/14/6075057.aspx 在Java中,Stri ...
- luogu1725 琪露诺
单调队列 #include <iostream> #include <cstdio> using namespace std; int n, l, r, dp[400005], ...
- 使用spyder3调试python程序
Ctrl+F5 以Debug模式运行文件 在debug之前记得用%reset 指令清空一下ipython工作空间中的变量,以免影响debug中变量值的查看 无论你是否打断点,都会在第一行语句执行之前中 ...
- 2.新手必须掌握的Linux命令
第2章 新手必须掌握的Linux命令 章节简述: 本章首先介绍系统内核和Shell终端的关系与作用,然后介绍Bash解释器的4大优势并学习Linux命令的执行方法.经验丰富的运维人员可以通过合理地组合 ...
- Nginx从入门到放弃-第3章 场景实战篇
3-1场景实践篇内容介绍: 3-2 Nginx作为静态资源Web服务_静态资源类型: 3-3 Nginx作为静态资源web服务_CDN(内容分发网络)场景: 3-4 Nginx作为静态资源Web服务_ ...