uni-app中class和style動態綁定

<!-- class 支持的語法: -->
<!-- <view :class="{ 'active': isActive}">111</view>
<view :class="{ 'active': isActive, 'text-danger': hasError}">111</view>
<view :class="[class1,class2]">111</view>
<view class="static" :class="[num>10 ? 'active' : 'text-danger',class3]">444</view> -->
   	
<!-- style 支持的語法: -->
<!-- <view :style="{ color: activeColor, fontSize: fontSize +'px' }">666</view> -->

class支持的語法

<view class="box" :class="[age>10?class1:'',sex=='女'?class2:'']">box</view>

style支持的語法

<view class="box" :style="{'color': Color,'font-size': size+'px'}">box</view>

完整例子

 <template>
    <view>
        <view class="box" :class="[age>10?class1:'',sex=='女'?class2:'']">綁定</view>
        <!-- style 支持的語法: -->
        <view class="box" :style="{'color': Color,'font-size': size+'px'}">綁定</view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                class1: "bor",
                class2: "fs",
                age:20,
                sex:'女',
                Color: "#333333",
                size: 50
            }
        },
        methods: {

        }
    }
</script>

<style>
    .box {
        background: pink;
        color: #FFFFFF;
        width: 350upx;
        height: 350upx;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50upx;
    }

    .bor {
        border: 10upx solid #CCC;
    }

    .fs {
        font-size: 80upx;
        color: #FFF;
    }
</style>