uniapp动态设置style和class样式

注意：以下两种样式设置，涉及到单位的只能用px，而不能使用rpx

style样式设置

样式名称统一使用驼峰命名方式：例如：fontSize
对象方式

:style="{backgroundImage:`url(${itemB.images})`}"

:style="{ paddingTop: paddingTopNum + 'px' }"

数组加三元运算方式

:class="[items.isShow?'':'noneActive',subIndex[index] == indexs?'value-item-active':'value-item']"

对象数组方式

:style="[{paddingTop: background},{color: getColor}]"
:style="[{ color: activeColor, fontSize: fontSize + 'px' }]"

对象方式

:style="{left:`${iconDistance}rpx`}":style="{backgroundImage:`url(${topBgImg})`}"

style方式calc

:style="{height:'calc(100vh - ' + pageTopHeight +'px - 140rpx)'}"

class样式设置

对象方式

:class="{ active: isActive, 'text-danger': hasError }"

数组方式

:class="[activeClass, errorClass]"

三元运算方式

:class="[isActive ? activeClass : ' ', errorClass]"

数组加对象方式

:class="[{ active: isActive }, errorClass]"

uniapp动态设置style和class样式相关推荐

uniapp动态设置导航栏和标题栏语言
hbuilderx中uniapp动态设置导航栏和标题栏语言一 .下载vue-i18n文件引入项目 hbuilder本身是带有能够运行nmp命令的终端,由于用不到全部文件,我采用的是在电脑cmd窗口下 ...
Vue动态设置Style属性
Vue动态设置Style属性_fuzhongbin的博客-CSDN博客_vue 动态style :style="{ color:domain.groups == 1? '#ccc': dom ...
vue动态设置style属性修改背景图片
原始class属性设置背景样式 .bannerP {position: absolute;top: 0;left: 2.96rem;right: 0;bottom: 0;background: url ...
【uniapp 动态设置起始页默认展示页面】
在开发一次uiapp app时,需要动态设置起始页,默认展示页,没有登录去登录页,登录了去首页因为uniapp 是 pages 的第一个是默认页所以这里我们需要处理一下才能完美的实现. 1:ma ...
uni-app 动态设置 swiper 的高度
开发中遇到两种需要动态设置 swiper 高度的情况: 1. 第一种,需要除开顶部或底部元素获取屏幕剩余高度. 如果顶部或底部元素高度固定,直接使用 calc 函数来计算: 如果高度不固定,通过 un ...
uni-app动态设置页面导航
1.动态设置当前页面的标题 uni.setNavigationBarTitle(OBJECT) 示例: uni.setNavigationBarTitle({title: '新的标题' });
vue中动态设置style样式和使用filters过滤器设置样式
例如:想给图片增加高度和宽度 <el-image :class="classRotation"v-if="imageData.src !== undefined&q ...
android 动态设置style属性值,android中的style属性值，以及一些预定义样式
Android平台定义的主题样式:android:theme="@android:style/Theme.Dialog" // 将一个Activity显示为对话框模式 androi ...
如何通过jQuery动态设置元素CSS的样式，以及HTML中CSS “内联式”、“嵌套式”、“外联式”使用方法
html元素使用CSS渲染标签的样式,可以通过内联式.嵌套式.外联式来将CSS样式添加到html中.有时候涉及到动态的参数,或者在事件中需要修改不同元素的CSS样式时,可以通过js获取目标元素,再其修 ...

uniapp动态设置style和class样式

style样式设置

class样式设置

uniapp动态设置style和class样式相关推荐

最新文章

热门文章