uni-app - Class 与 Style 绑定
参考uni文档：https://uniapp.dcloud.io/use?id=class-%E4%B8%8E-style-%E7%BB%91%E5%AE%9A
Class类和Style通过值快速切换
uni官方和vue文档有不明之出，官方已指出
1 <template>
2 <view class="content f f-wrap">
3
4 <image class="logo" src="../../static/image/myHover.png" @click="tap"></image>
5
6 <!--
7 前：样式
8 后：控制:显示/隐藏
9 -->
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>
39
40 <script>
41
42
43
44 export default {
45 data() {
46 return {
47 title: 'Hello',
48
49 // 单激活类
50 isActive: true,
51 hasError: true,
52
53 // 多种激活类
54 activeClass: {
55 'active': false,
56 'text-danger': true
57 },
58 errorClass: {
59 'active': true,
60 'text-danger': false
61 },
62
63 activeColor:true,
64 fontSize:30
65 }
66 },
67 onLoad() {
68 this.fetchData()
69 console.log('页面加载')
70 },
71 onShow() {
72 console.log('页面显示')
73 },
74 onReady() {
75 console.log('页面初次显示')
76 },
77 onHide() {
78 console.log('页面隐藏')
79 },
80 onUnload() {
81 console.log('页面卸载')
82 },
83 onBackPress() {
84 console.log('页面返回...')
85 },
86 onShareAppMessage() {
87 console.log('分享!')
88 },
89 onReachBottom() {
90 console.log('下拉加载...')
91 },
92 onPageScroll() {
93 console.log('页面滚动...')
94 },
95 onPullDownRefresh() {
96 console.log('上拉刷新...')
97 uni.stopPullDownRefresh();
98 },
99
100 // #ifdef APP-PLUS
101 onNavigationBarButtonTap() {
102
103 },
104 // #endif
105
106 methods: {
107 tap(e) {
108 console.log('tap点击!', e);
109 },
110 fetchData() {
111 console.log('拉取数据...');
112 },
113 computedClassStr() {
114 return this.isActive ? 'actives' : 'active'
115 }
116 }
117 }
118 </script>
119
120 <style lang="scss">
121 .active {
122 color: #f00;
123 }
124
125 .activeGrey {
126 color: #aaa;
127 }
128
129 .text-danger {
130 color: #f0f;
131 font-weight: bold;
132 }
133
134 .f {
135 display: flex;
136 }
137
138 .f-wrap {
139 flex-wrap: wrap;
140 }
141 </style>
通过模板（template）端控制模板
通过控制端（JS）来控制行为
通过（CSS）显示端进行显示
