uni 动态添加style_uniApp——v-for 动态class、动态style

:class="i.themColor"

{{i.title}}

{{i.txt}}

import common from '../../common/common.js';

export default {

data() {

return {

htmlJSON:common.kdtHomeHtmlJSON

}

},

methods: {

},

mounted() {

}

}

// 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

}

}

//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}"

{{itemList[0].TypeName}}

预约

{{item.BookTimeTxt}}

{{item.Name}}

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{...}

]

}

js动态创建样式: style 和 link

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

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

存储过程 statementType="CALLABLE" /********************************** (C) COPY ...

RecursiveDirectoryIterator目录操作类

/** * @author Funsion Wu * @abstract SPL使用案例,全国首发,技术分享,欢迎转帖 */ class Dir extends RecursiveDirectoryI ...

使用SoapUI 测试Web Service

原文:使用SoapUI 测试Web Service 如何测试写好的Webservice?你当然可以写代码来测试,但还是太麻烦,你得花时间去学习各语言的关于Webservice调用的相关API.这里推荐 ...

jsp页面中某个src，如某个iframe的src，应该填写什么？可以是html、jsp、servlet、action吗？是如何加载的？

jsp页面中某个src,如某个iframe的src,应该填写什么?可以是html.jsp.servlet.action吗?是如何加载的? 如有个test工程,其某个jsp中有个iframe,代码如下: ...

《设计模式之禅》--设计模式大PK

创建类模式包括工厂方法模式.建造者模式.抽象工厂模式.单例模式和原型模式. 其中单例模式要保持在内存中只有一个对象,原型模式是要求通过复制的方式产生一个新的对象. [工厂方法(抽象工厂) VS 建造者 ...

ES6(数据结构_2)

数据结构—2 Map 与 Array 的对比 Set 与 Array的对比 Map 与 Object 的对比 Set 与 Object 的对比 (增.查.改.删) 一.Map 与 Array 的对比 ...