vue(uniapp)中动态样式 class && style

最新推荐文章于 2024-09-14 10:18:21 发布

RosyClouds~

最新推荐文章于 2024-09-14 10:18:21 发布

阅读量1.2k

点赞数

文章标签： vue.js uni-app javascript

本文链接：https://blog.csdn.net/qq_45213494/article/details/128200230

版权

vue(uniapp)中动态样式 class && style

1.style样式动态设置

<template>
    <view>
    	//1.动态添加颜色
        <view :style="{color:fontColor}"> </view>
         //2.动态添加边距
        <view :style="{ paddingTop: num + 'px' }"></view>
         //3.动态添加背景图片
        <view :style="{backgroundImage: 'url(' + imageURL + ')','background-repeat':'no-repeat', 
                 backgroundSize:'100% 100%'}">
        </view>
        //4.动态同时添加颜色和边距
        <view :style="[{paddingTop: num + 'px'},{color:fontColor}]"></view>
        //5.三元运算符 如果flag为true,颜色就为green色
        <view :style="[{color:(flag?'green':fontColor)}]"></view>
        </view>
</template>
 
<script>
    export default {
            data() {
                return {
                    imageURL: 'https://app-file.beitaichufang.com/img/H5/web/banner/banner23.jpg', //图片
                    num:20, //字体大小
                    fontColor:'red', //字体颜色
                    flag:true,
                }
          }
    }
</script>

2.class样式动态设置

<template>
    <view>
        <!--第一种写法-->
         <view :class="[isRed?'red':'green']"></view>
        <!--简写法-->
        <view :class="{red:isRed}"></view>
    </view>

</template>

<script>
    export default{
        data(){
            return{
                isRed: true
            }
        }
    }
</script>

<style>
    .red{
        color:#DD524D;
    }
    .green{
    	color:#00FF00
    }    
</style>