随笔- 55 文章- 0 评论- 3 阅读- 52227

vue uniapp 动态class

 1     // 绑定单个内联样式
 2     <view :style="{'display':config.isHaveSearch ? 'block':'none'}" ></view>
 3     <view :style="{color:item.age<18?'#ccc':''}"></view>
 4     
 5     <view :style="{ color: activeColor, fontSize: fontSize + 'px' }"></view>
 6     <view :style="[{ color: activeColor, fontSize: fontSize + 'px' }]"></view>
 7 
 8 
 9 
10     // 绑定单个class属性
11     <view :class="{ 'active': isActive }" ></view>
12     <view :class="{'active':isActive==index}"></view>
13     
14     <view :class="{ active: isActive }"></view>
15     <view :class="{ active: isActive, 'text-danger': hasError }"></view>
16     <view :class="[activeClass, errorClass]"></view>
17     <view :class="[isActive ? activeClass : '', errorClass]"></view>
18     <view :class="[{ active: isActive }, errorClass]"></view>
19 
20 
21     <view :class="cosi==index ? 'select':'unselect'"></view>    
22 
23 
24 
25     // 数组的方式，直接绑定多个 class 属性
26     <view :class="['green', 'font-big','font-bold' ]" ></view>
27 
28 
29     // 多条件绑定样式
30    <view class='step' :class="[item.state=='工作' ? 'online' : '',item.state=='空闲' ? 'idle' : '',item.state=='离线' ? 'offline' : '']">
31 
32 
33 
34     // 绑定多个class属性
35     
36     <view :class="{ 'active': isActive, 'sort': isSort }"></view>
37     // data 中声明
38     :class="classObject"
39     data() {
40       return {
41         classObject:{ active: true, sort:false }
42       }
43     }
44     
45     // 第三种（使用computed属性）
46     :class="classObject"
47     data() {
48       return {
49         isActive: true,
50         isSort: false
51       }
52     },
53     computed: {
54       classObject: function () {
55         return {
56              active: this.isActive,
57            sort:this.isSort
58         }
59     }
60  
61 
62 
63     :class="[isActive,isSort]"
64     data() {
65        return{
66           isActive:'active',
67           isSort:'sort'
68        }
69     }
70     // 数组与三元运算符结合判断选择需要的class
71    <view :class="[item.name? 'lg':'sm']"></view>
72    <view :class="[item.age<18? 'gray':'']"></view>
73    // 数组对象结合
74    :class="[{ active: isActive }, 'sort']"
75    
76 
77 
78 
79 // 复杂情况
80 <text class="title" :style="'filter:grayscale('+(funding>'0'?'100%':'0')+')'" style="color:red;">{{title}}</text>