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>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM