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

 

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

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

        <!-- 
            前：样式
            后：控制:显示/隐藏
         -->


        <!-- 单类 -->
        <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 {
        data() {
            return {
                title: 'Hello',

                // 单激活类
                isActive: true,
                hasError: true,

                // 多种激活类
                activeClass: {
                    'active': false,
                    'text-danger': true
                },
                errorClass: {
                    'active': true,
                    'text-danger': false
                },
                
                activeColor:true,
                fontSize:30
            }
        },
        onLoad() {
            this.fetchData()
            console.log('页面加载')
        },
        onShow() {
            console.log('页面显示')
        },
        onReady() {
            console.log('页面初次显示')
        },
        onHide() {
            console.log('页面隐藏')
        },
        onUnload() {
            console.log('页面卸载')
        },
        onBackPress() {
            console.log('页面返回...')
        },
        onShareAppMessage() {
            console.log('分享!')
        },
        onReachBottom() {
            console.log('下拉加载...')
        },
        onPageScroll() {
            console.log('页面滚动...')
        },
        onPullDownRefresh() {
            console.log('上拉刷新...')
            uni.stopPullDownRefresh();
        },

        // #ifdef APP-PLUS
        onNavigationBarButtonTap() {

        },
        // #endif

        methods: {
            tap(e) {
                console.log('tap点击!', e);
            },
            fetchData() {
                console.log('拉取数据...');
            },
            computedClassStr() {
                return this.isActive ? 'actives' : 'active'
            }
        }
    }
</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）显示端进行显示