动态样式
<template>
2 <view class="content f f-wrap">
3
4
5
10
11
12 <!-- 单类 -->
13 <view :class="{ active: isActive }">111</view>
14
15 <!-- 对象 -->
16 <view class="static" :class="{ active: isActive, 'text-danger': hasError }">222</view>
17
18 <!-- 数组 -->
19 <view class="static" :class="[activeClass, errorClass]">333</view>
20
21 <!-- 条件 -->
22 <view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view>
23
24 <!-- 数组+对象 -->
25 <view class="static" v-bind:class="[{ activeGrey: isActive }, errorClass]">555</view>
26
27 <!-- 执行类 -->
28 <view class="container" :class="computedClassStr"></view>
29 <view class="container" :class="{activeGrey: isActive}">9999</view>
30
31
32
33 <!-- style支持的类 -->
34 <view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view>
35 <view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view>
36
37 </view>
38 </template>
条件编译
uni-app 将已经将可以跨平台兼容处理的组件及 API 等进行了封装，但是部分平台的特性无法跨平台。 由此，uni-app 提供了条件编译的方案，来处理不同平台的特定或差异。
- ifdef：if defined 正向条件，也就是说在 XX 平台下生效。
- ifndef：if not defined 反向条件，在 XX 平台不生效。即除了 XX 平台，其它平台都生效
- endif：条件结束
- %PLATFORM%：平台名称
%PLATFORM% 可取值
- APP-PLUS
- APP-PLUS-NVUE
- H5
- MP-WEIXIN
- MP-ALIPAY
- MP-BAIDU
- MP
示例
以下这段代码，只会在 5+App 环境下生效/存在。
// #ifdef APP-PLUS
const uuid = plus.device.uuid;
// #endif
除了支持单个平台的条件编译外，还支持使用 || 来满足多平台条件编译。
这个组件会在微信小程序及百度小程序环境下生效：
<!-- #ifdef MP-WEIXIN || MP-BAIDU -->
<button @getuserinfo="getUserInfo">获取用户信息</button>
<!-- #endif -->
不同文件或语言中，注释的方式有所不同。在实际使用中一定要注意，不要随意复制导致语法错误。
组件
<!-- #ifdef MP-WEIXIN -->
<ad unit-id="123456789"></ad>
<!-- #endif -->
js
// #ifdef MP-ALIPAY
open:function(){
}
//#endif
css
/* #ifdef MP-ALIPAY*/
input {
padding: 0;
}
/* #endif */
