uniapp三元运算符 

<view v-bind:class="[tab == 6 ? checkedtabclass : '',commontabclass]" @click="checktab(6)">
	<view class="line1">已下架</view>
	<view class="line2">1033</view>
</view>

<script>
	export default {
		data() {
			return {
				keywords:'',
				tab:1,
				commontabclass:'tab',
				checkedtabclass:'tab_checked'
			};
		}
</script>



<template>
    <view>
        <!-- class -->
        <view class="static" :class="[activeClass,errorClass]">111</view>
        <view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">222</view><!-- 三元表达式 -->
        <view class="static" v-bind:class="[{ active: isActive }, errorClass]">333</view>
        <!-- style -->
        <view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">444</view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                isActive: true,
                activeClass: 'active',
                errorClass: 'text-danger',
                activeColor:"green",
                fontSize:50
            }
        }
    }
</script>
<style>
    .static{
        font-size:30rpx;
    }
    .active{
        background-color: #007AFF;
    }
    .text-danger{
        font-size:60rpx;
        color:#DD524D;
    }
</style>
posted @ 2022-02-18 11:12  盘思动  阅读(1254)  评论(0)  编辑  收藏  举报