2vue的class动态绑定形式

浪子不回头ぞ 提交于 2019-11-30 22:12:16

vue的class动态绑定,分为2种形式

第一数组形式:

<div
class="test"
:class="[isGreen ? 'active' :'']">
我是模拟1
</div>

data中变量在前面展示

 

第二对象形式

<div
:class="{active:isActive,green:isTest}">
我是模拟2
</div>

data中变量写后面

 

<style>
.test{font-size:30px;}
.green{color:#00FF00;}
.active{background:#FFf000;}
</style>

 

动态绑定class ,由data中变量控制

data : {
isActive : true,
isGreen : true,
isTest: true,
}

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!