vue改变class样式

首先，定义了样式

    .change{
        height: 100px;
        width: 100px;
        line-height: 100px;
        background-color: #ff0000;
        border-radius: 50%;
        text-align: center;
    }
    .bgc{
        background-color: #00f !important;
    }
    .fontSize{
        font-size: 20px;
    }

网页中定义了一个div，id为box

    <div id="box" :class="{change:true,bgc:val==true,fontSize:boo}">
        box
    </div>
	<script src="./js/vue/vue.js"></script>
	<script type="text/javascript">
        var indexVm = new Vue({
            el:"#box",
            data:{
                val:false,
                boo:false
            }
        });
    </script>

详解

使用 : 号，让vue识别这是一个通过vue来改变样式的标签
使用大括号说明里面需要进行判断
change:true，值为true代表这是一个启用样式，为false代表禁用样式
bgc:val==true，逗号后面的bgc代表通过判断，如果计算结果为true，则使用bgc样式，也就是定义的bgc样式，但是此时的change样式也会启用
fontSize:boo，最后一个相当于一个简写
只要条件满足，则大括号内可以有多个判断进行样式控制

方式2

--------------------js---------------------------------
data(){
	return {
		bgColor: 'blue'
	}
}
-------------------------------------------------------
<view class="w100 psf df fr aic jcsb z1 f2  bgwhite cl333"
	style="height: 150rpx;border-bottom: 1rpx solid #cecece;"
	:style="{backgroundColor:bgColor,color:2==2?'white':'red'}">
	<view class="pdl20">
		
	</view>
	<view class="">
		我的'背景渐变'
	</view>
	<view class="pdr20" @click="toSettings">
		⚙
	</view>
</view>

三元表达式那儿直接换值就行了

效果：