uni-app样式的使用

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

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


        <!-- 单类 -->
        <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 > <text  :style="{'border-bottom':isShow?'2px  solid  '+bordline:''}"  style="display: inline-block; "  >玩传奇，赚大钱</text></view>
        
<view> <text  :class="isShow?'boxclass1':'boxclass2'"  style="display: inline-block;text-align: center;"  >租女友200一晚</text></view>
    </view>
</template>

<script>



    export default {
        data() {
            return {
                title: 'Hello',
                 isShow:true,
                 bordline:"red",
                // 单激活类
                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 {
       
    }

    .f-wrap {
        flex-wrap: wrap;
    }
    .boxclass1{
      width: 200px;
      height: 200px;
      background-color: #007AFF;
       
    }
    .boxclass2{
      width: 200px;
      height: 200px;
      background-color: #325343;
    }
</style>

效果：