AngularJS中ng-class和class的区别

zhu jun~

于 2016-11-08 11:19:55 发布

阅读量3.7k

点赞数

本文链接：https://blog.csdn.net/zhujun_xiaoxin/article/details/53080413

版权

首先我们看下ng-class的写法：

<style>
.red{
    background-color:red;
}
.green{
    background-color:green;
}
</style>
<div ng-class="{red:x>5,green:x<=5}"></div>

我们可以看出ng-class中的属性是一个js对象的写法，key/value对。只不过这里的value值变为了一个选择条件。
ng-class和class的主要区别可以这样来理解：这两个都是元素的样式属性，class相当于这个属性是静态的，是一个常量。而ng-class的属性是根据if来判断来选择应用不用的样式，因此它是动态的。
上面的例子就是说当x>5时，应用.red样式。当x<=5时，应用.green样式。