v-bind绑定属性样式——class的三种绑定方式

起因是，写项目用到了这样的代码：

<div class="u-button-group f-tal" style="margin-top:25px;margin-left:0px;justify-content: flex-start;align-items: flex-start !important;">
                            <el-button type="info" @click="increaseOrReduceFlag=false" :class="{'bgletItem':!increaseOrReduceFlag}" ><i class="icon icon-add"/>&nbsp;&nbsp;充</el-button>
                            <el-button type="info"  @click="increaseOrReduceFlag=true" :class="{'bgletItem':increaseOrReduceFlag}"><i class="icon icon-jian3"/>&nbsp;&nbsp;减</el-button>
                        </div>

对于这里知道的不是很清楚，就去搜了一下

以下部分是别人总结好的，我摘过来当笔记记录一下，便于查找

1、布尔值的绑定方式

<div id="demo">
　　<span v-bind:class="{‘class-a‘:isA ,‘class-b‘:isB}"></span>
</div>

var vm = new Vue({
　　　　el:"#demo",
　　　　data:{
　　　　　　isA: true,
　　　　　　isB: true
　　　　}
})

2、变量的绑定方式

<div id="demo">
<span :class=[classA,classB]></span>
</div>

var vm = new Vue({
　　　　el:"#demo",
　　　　data:{
　　　　　　classA:"class-a",
　　　　　　classB:"class-b"
　　　　}
})

3、字符串绑定方式

<div id="demo">
　　<span :class="classA"></span>
</div>

var vm = new Vue({
　　　　el:"#demo",
　　　　data:{
　　　　　　classA:"string"
　　　　}
})

4、综合的写法

<div id="demo">
　　<span :class="[one,{‘classA‘:classa,‘classB‘:classb}]"></span>
</div>

var vm = new Vue({
　　　　el:"#demo",
　　　　data:{
　　　　　　one:"string",
　　　　　　classa:true,
　　　　　　classb:false

　　　　}
})

摘自：https://www.cnblogs.com/feiyu159/p/8620156.html

__EOF__

本文作者：fiamme
本文链接：https://www.cnblogs.com/vivin-echo/p/14451540.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！