uniapp（vue）中动态添加绑定style + class

目录

一、style样式动态设置

 1.普通对象动态添加（比较常见）

2.数组对象动态添加

 3.三步运算动态添加

4.多重值（这种用的不是很多）

二、class动态设置

 普通动态添加（比较常见）
一、style样式动态设置
 1.普通对象动态添加（比较常见）

<template>
    <view>
        <view :style="{color:fontColor}"> </view>
         
        <view :style="{ paddingTop: num + 'px' }"></view>
         
        <view :style="{backgroundImage: 'url(' + imageURL + ')','background-repeat':'no-repeat', 
                 backgroundSize:'100% 100%'}"></view>
    
        //1.动态添加颜色
        //2.动态添加边距
        //3.动态添加背景图片
    </view>
</template>
 
<script>
    export default {
            data() {
                return {
                    imageURL: 'https://app-file.beitaichufang.com/img/H5/web/banner/banner23.jpg', //图片
                    num:20, //字体大小
                    fontColor:'red' //字体颜色
                }
          }
    }
</script>

2.数组对象动态添加

<template>
    <view>
        <view :style="[{paddingTop: num + 'px'},{color:fontColor}]"></view>    
        
        <view :style="[{'background-image':`url(${imageURL})`},{'background-repeat':'no-repeat'},
                      {'background-size':'100% 100%'}]"></view>
        
        //1.动态添加颜色，动态添加边距
        //2.动态添加背景图片
    </view>
</template>
 
<script>
    export default {
            data() {
                return {
                    imageURL: 'https://app-file.beitaichufang.com/img/H5/web/banner/banner23.jpg', //图片
                    num:20, //字体大小
                    fontColor:'red' //字体颜色
                }
          }
    }
</script>

 3.三步运算动态添加

<template>
    <view>
        <view :style="[{color:(flag?fontColor:'green')},{fontSize:'20px'}]">green</view>
        
        <view :style="[{color:(!flag?fontColor:'green')}]">red</view>
        
        //如果flag为true   颜色就为red色
        //如果flag为false  颜色就为green色
 
 
       <view :style="[flag?{top:searchTop + 'px',width:searchWidth + 'px'}:{top:'100px',width:'100%'}]"></view>
    </view>
</template>
 
<script>
   export default {
        data() {
            return {
                fontColor:'red',
                flag:false,
                searchTop:20,
                searchWidth:100
            }
      }
}
</script>

4.多重值（这种用的不是很多）

<view :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></view>

 

二、class动态设置 

 普通动态添加（比较常见）

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

</template>

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

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

 动态切换案例

<template>
    <view>
        <view v-for="(item,index) in menus" class="menu" :class="[activeIndex==index?'menuActive':'']" @click="menuClick" :id="index">
            {{item}}
        </view>
    </view>
</template>

<script>
    var _self;
    export default{
        data(){
            return{
                activeIndex:0,
                menus:[
                    '新闻',
                    '汽车',
                    '读书'
                ]
            }
        },
        onLoad() {
            _self=this;
        },
        methods:{
            menuClick:function(e){
                var aId=e.target.id;
                
                _self.activeIndex=aId;
            }
        }
    }
</script>

<style>
.menu{
    padding: 10px;
    float: left;
    margin:5px;
    line-height: 36x;
}
.menuActive{color:#FF0000 !important;}
</style>