html5动态切换class,uni-app v-for循环遍历动态切换class、动态切换style

exportdefault{

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'}]

}

html5动态切换class,uni-app v-for循环遍历动态切换class、动态切换style相关推荐

动态二维数组赋值及for循环遍历和toString遍历
package com.Summer_0421.cn;import java.util.Arrays;/*** @author Summer* 动态二维数组赋值及for循环遍历和toString遍历* ...
layui循环遍历数据_Layui之动态循环遍历出的富文本编辑器显示
这篇记得是工作中的例子描述: 平常的富文本显示都是根据静态的html获取id来显示,比如: 富文本内容 layui.use([ "form", "layer" ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
HTML5定稿了为什么原生App世界将被颠覆
原文:http://www.admin10000.com/document/5415.html 2007年W3C(万维网联盟)立项HTML5,直至2014年10月底,这个长达八年的规范终于正式封稿. ...
html5 瓶颈,html5+css3方式实现mobie app的一些瓶颈
原标题:html5+css3方式实现mobie app的一些瓶颈也是传统的C/S模式居多,后进化到B/S模式,并产生了SaaS.等概念和应用.从客户端进化到浏览器最大好处是客户端无需更新,减少了大量 ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
html5页面中打开本地app，如果没有跳转下载页面的解决方案
需求效果在推广网页上用户点击产品的详细信息时,判断出这个用户手机上是否安装自己的app如果安装了直接自动打开手机内的app应用,若没有则跳转app的下载页技术实现直接用window.locati ...
百度开发者大会-《用HTML5新特性开发移动App》PPT分享
今天百度开发者大会,移动互联网分论坛,我的主题演讲<用HTML5新特性开发移动App>PPT分享如下. 完整PPT可在Slideshare观看,或者在百度开放云平台上下载到.
学习动态性能表第二篇--v$sesstat
学习动态性能表第二篇--v$sesstat 按照OracleOnlineBook中的描述,v$sesstat存储session从login到logout的详细资源使用统计. 类似于v$syssta ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...

html5动态切换class,uni-app v-for循环遍历动态切换class、动态切换style

html5动态切换class,uni-app v-for循环遍历动态切换class、动态切换style相关推荐

最新文章

热门文章

html5动态切换class,uni-app v-for循环遍历 动态切换class、动态切换style

html5动态切换class,uni-app v-for循环遍历 动态切换class、动态切换style相关推荐

最新文章

热门文章

html5动态切换class,uni-app v-for循环遍历动态切换class、动态切换style

html5动态切换class,uni-app v-for循环遍历动态切换class、动态切换style相关推荐