uni-app中class和style动态绑定

短命女 2023-02-14 01:44 368阅读 0赞

### 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>
            
            <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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200530161827354.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ==,size_16,color_FFFFFF,t_70