uniapp样式绑定方式

最新推荐文章于 2025-05-14 18:31:08 发布

原创最新推荐文章于 2025-05-14 18:31:08 发布 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #python #js #class

uni-app开发笔记专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了uni-app中Class和样式的多种绑定方式，包括常规的class属性设置、内联样式绑定、动态样式修改以及数组形式的类名绑定。通过示例代码展示了如何根据变量改变字体颜色、大小以及动态应用多个类。同时，文章涵盖了v-bind:class的使用，如条件类名绑定、复合类名绑定等，以及内联样式动态绑定，帮助开发者更好地理解和运用uni-app的样式绑定功能。

uni-app的Class与样式的绑定

可用的几种class绑定方式:

<!-- 常规形式 -->
<view class="green">绿色的字体</view>
<view style="color: #00FF00;"> 我是一个绿色的内联样式字体</view>

<!--style 内联样式 绑定的形式 其中fontSize是一个变量，改变这个变量，字体也会随之改变-->
<view :style="{fontSize:fontSize + 'px'}"> 我是一个动态的内联样式字体</view>

<!-- 绑定的形式导入，接收的是一个数组，元素之间用逗号分割 -->
<view :class="['green', 'font-big','font-bold' ]" >大绿色粗体</view>
<!-- 动态绑定 -->
//class 支持的语法
<view :class="{ active: isActive }">111</view>
<view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view>
<view class="static" :class="[activeClass, errorClass]">333</view>
<view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view>
<view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view>
//style 支持的语法
<view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view>
<view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view>