uni-app

参考uni文档：https://uniapp.dcloud.io/use?id=class-%E4%B8%8E-style-%E7%BB%91%E5%AE%9A

参考vue文档：https://cn.vuejs.org/v2/guide/class-and-style.html#%E7%BB%91%E5%AE%9A%E5%86%85%E8%81%94%E6%A0%B7%E5%BC%8F

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）显示端进行显示