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