uni-app - Class 與 Style 綁定

參考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文檔有不明之出，官方已指出

 

<template>
    <view class="content f f-wrap">

        <image class="logo" src="../../static/image/myHover.png" @click="tap"></image>

        <!-- 
 前：樣式  8  后：控制:顯示/隱藏  9          -->


        <!-- 單類 -->
        <view :class="{ active: isActive }">111</view>

        <!-- 對象 -->
        <view class="static" :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="[{ activeGrey: isActive }, errorClass]">555</view>

        <!-- 執行類 -->
        <view class="container" :class="computedClassStr"></view>
        <view class="container" :class="{activeGrey: isActive}">9999</view>



        <!-- style支持的類 -->
        <view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view>
        <view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view>

    </view>
</template>

<script>
   
  

 export default {  45  data() {  46             return {  47  title: 'Hello',  48 
                // 單激活類
 isActive: true,  51  hasError: true,  52 
                // 多種激活類
 activeClass: {  55                     'active': false,  56                     'text-danger': true
 },  58  errorClass: {  59                     'active': true,  60                     'text-danger': false
 },  62                 
 activeColor:true,  64  fontSize:30
 }  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 
        // #ifdef APP-PLUS
 onNavigationBarButtonTap() { 102 
 }, 104         // #endif

 methods: { 107  tap(e) { 108  console.log('tap點擊!', e); 109  }, 110  fetchData() { 111  console.log('拉取數據...'); 112  }, 113  computedClassStr() { 114                 return this.isActive ? 'actives' : 'active'
 } 116  } 117  } 118 </script>

<style lang="scss">
 .active {
 color: #f00;
    }

 .activeGrey {
 color: #aaa;
    }

 .text-danger {
 color: #f0f;
 font-weight: bold;
    }

 .f {
 display: flex;
    }

 .f-wrap {
 flex-wrap: wrap;
    }
</style>

 

 

通過模板（template）端控制模板

 

 通過控制端（JS）來控制行為

 

 

通過（CSS）顯示端進行顯示