:class="i.themColor" 

<view  v-for="i in htmlJSON" class="column" :class="i.themColor"  >
<view class="uni-flex uni-column line">
<view class="flex-item flex-item-V uni-bg-red">
<view class="flex-item left">
<view class="title">{{i.title}}</view>
<view class="txt">{{i.txt}}</view>
</view>
</view>
</view>
</view> <script>
import common from '../../common/common.js';
export default {
data() {
return {
htmlJSON:common.kdtHomeHtmlJSON
}
},
methods: {
},
mounted() {
}
}
</script> <style lang="scss">
// body
.content{
width: 750upx;
height: 634upx;
} // 内容:
.colorA268D4{
background:#A268D4 url(../../static/images/kdt/icon-test.png) no-repeat 530upx 45upx;
background-size: 125upx;
}
.colorFA5E8A{
background:#FA5E8A url(../../static/images/kdt/icon-.png) no-repeat 530upx 45upx;
background-size: 125upx;
}
.color58C4CC{
background:#58C4CC url(../../static/images/kdt/icon-curriculum.png) no-repeat 530upx 45upx;
background-size: 125upx;
}
.color7E8FEF{
background:#7E8FEF url(../../static/images/kdt/icon-family.png) no-repeat 530upx 45upx;
background-size: 125upx;
}
.column {
width: 702upx;
height: 182upx;
margin:17upx auto;
padding-left: 25upx;
padding-top: 35upx;
line-height: 42upx;
letter-spacing: 4upx;
border-radius: 10upx;
.title{
color: #ffffff;
font-size: 31upx;
}
.txt{
width: 426upx;
font-size: 25upx;
color: #E6E6E6
}
} </style> //commom.js
export default {
kdtHomeHtmlJSON:[{
title:'体测数据录入',
txt:'体测数据现场“录入+上传”,一步到位!',
themColor:'colorA268D4'
},
{
title:'入园师训',
txt:'提高幼师对于体育与运动领域基本知识,基本技能,实践操作能力',
themColor:'colorFA5E8A'
},
{
title:'体能课程',
txt:'提升幼师对于体育与运动领域基本知识,基本技能,实践操作能力',
themColor:'color58C4CC'
},
{
title:'家长工作',
txt:'确保每位家长都能收到孩子的体能成果',
themColor:'color7E8FEF'
}]
}

 :style="{'background':item.TypeColor}"

 

<!-- 体测 -->
<view class="block" v-for="itemList in list">
<view class="title">
<view class="title-word">
{{itemList[0].TypeName}}
</view>
</view>
<view class="content" v-for="(item,index) in itemList" :key="index">
<!-- 日历选择器 -->
<picker mode="date" :value="item.BookTime" @change="bindDateChange($event,item)">
<view class="book left" v-if="!item.BookTime">
<image src="../../static/images/icon-calendar.png" mode=""></image>
<view class="text">
预约
</view>
</view>
<view class="booked left" v-else >
<text>{{item.BookTimeTxt}}</text>
<image src="../../static/images/icon-calendar.png" mode=""></image>
</view>
</picker>
<!-- 分割西线 -->
<view class="break left" >
<view class="break-line-pe left" :style="{'background': item.TypeColor}"></view>
</view>
<!-- 题目 -->
<view class="message-pe left" :style="{'background': item.TypeColor}">
<view class="message-info nowrap">
{{item.Name}}
</view>
</view>
</view>
<view class="box"></view>
</view> <script>
this.list={
"2":[
{
"Id":1657,
"CreateTime":"2019-01-26T15:05:40.5970000",
"ServiceUnitId":2004,
"ServiceMetadataId":5,
"LikedCount":0,
"Type":2,
"Status":false,
"ContentId":81,
"Name":"森林运动会",
"TypeName":"课程",
"TypeColor":"#68CDD4"
},
Object{...},
Object{...},
Object{...}
],
"3":[
Object{...},
Object{...}
],
"4":[
Object{...},
Object{...}
]
}
<script>

uniApp——v-for 动态class、动态style的更多相关文章

  1. js动态创建样式: style 和 link

    js动态创建样式: style 和 link ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 有很多提供动态创建 ...

  2. 洛谷P4719 【模板】"动态 DP"&动态树分治

    [模板]"动态 DP"&动态树分治 第一道动态\(DP\)的题,只会用树剖来做,全局平衡二叉树什么的就以后再学吧 所谓动态\(DP\),就是在原本的\(DP\)求解的问题上 ...

  3. c++ 动态内存 动态数组

    动态内存-动态数组 习题12.23 //连接字符串到动态数组 char *c = new char[20](); char a[] = "hello "; char b[] = & ...

  4. mybatis操作动态表+动态字段+存储过程

    存储过程 statementType="CALLABLE" <!-- 计算金额存储过程--> <update id="getCalcDistributo ...

  5. C# 反射,动态类,动态方法

    1.动态类名,固定方法名,例如.调用不同类下边的GetById()方法: //项目需要引用Miscorsoft.CSharp类库,否则会报错:找不到编译动态表达式所需的一个或者多个类型.//引用这两个 ...

  6. jQuery的下面是动态表格动态表单中的HTML代码

    动态表格动态表单中的Jquery代码 <script type="text/javascript" src="/include/jquery/jquery-1.1. ...

  7. Quartz.NET 3.0.7 + MySql 实现动态调度作业+动态切换版本+多作业引用同一程序集不同版本+持久化+集群(一)

    原文:Quartz.NET 3.0.7 + MySql 实现动态调度作业+动态切换版本+多作业引用同一程序集不同版本+持久化+集群(一) 前端时间,接到领导任务,写了一个调度框架.今天决定把心路历程记 ...

  8. django"动态网页","动态url","调试方法"

    一.动态网页 其实只是每次刷新时,获取最新时间而已 1.urls.py from django.conf.urls import patterns, url, include urlpatterns ...

  9. [CSAPP-II] 链接[符号解析和重定位] 静态链接 动态链接 动态链接接口

    1 平台 转http://blog.csdn.net/misskissc/article/details/43063419 1.1 硬件 Table 1. 硬件(lscpu) Architecture ...

  10. 函数-->指定函数--->默认函数--->动态函数--> 动态参数实现字符串格式化-->lambda表达式,简单函数的表示

    #一个函数何以接受多个参数#无参数#show(): ---> 执行:show() #传入一个参数 def show(arg): print(arg) #执行 show(123) #传入两个参数 ...

随机推荐

  1. python基础-函数(9)

    一.函数的介绍 如果在开发程序时,需要某块代码多次,但是为了提高编写的效率以及代码的重用,所以把具有独立功能的代码块组织为一个小模块,这就是函数 函数的语法格式: def 函数名(): 函数的功能代码 ...

  2. MappedByteBuffer

    计算机内存管理 原文链接 https://www.cnblogs.com/guozp/p/10470431.html MMC:CPU的内存管理单元. 物理内存:即内存条的内存空间. 虚拟内存:计算机系 ...

  3. 学习Identity Server 4的预备知识 (误删, 重补)

    我要使用asp.net core 2.0 web api 搭建一个基础框架并立即应用于一个实际的项目中去. 这里需要使用identity server 4 做单点登陆. 下面就简单学习一下相关的预备知 ...

  4. python内置方法大全

    数学运算 abs:求数值的绝对值 >>> abs(-2) 2 divmod:返回两个数值的商和余数 >>> divmod(5,2) (2, 1) >> ...

  5. Python:SQLMap源码精读—基于时间的盲注(time-based blind)

    建议阅读 Time-Based Blind SQL Injection Attacks 基于时间的盲注(time-based blind) 测试应用是否存在SQL注入漏洞时,经常发现某一潜在的漏洞难以 ...

  6. 一套代码小程序&Web&Native运行的探索03——处理模板及属性

    接上文:一套代码小程序&Web&Native运行的探索02 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/m ...

  7. [转]Python in Visual Studio Code

    本文转自:https://code.visualstudio.com/docs/languages/python Working with Python in Visual Studio Code, ...

  8. I/O输入流基础之FileInputStream

    InputStream:是所有字节输入流的父类,其作用是:用这个流把网络数据(getOutputStream()),文件系统的数据读入内存 由与  public abstract class Inpu ...

  9. 解决Spring MVC前台传参中文乱码问题

    在web.xml文件中配置字符编码过滤器: <filter> <filter-name>CharacterEncoding</filter-name> <fi ...

  10. maven的项目目录解析

    target文件夹用于存放项目编译后产生的class文件.