angularjs ng-class的用法,做项目遇到,看是简单,也确实简单,自己做了几个例子测试了一个。

三种用法:

1、作为字符用

2、对象数组形式

3、对象键值对形式 key/value

第一种就不用细说了,只要搜过ng-class的用法,首先知道的就是这个

第二种对象数组形式:

上图

解析angularjs ng-class

自己做的时候,搜索说colors1为true就用red样式 为false就用yellow样式,这个没问题。问题是只能用这个true或者false吗?不是的,经过自己测试,其实这个就是javascript对象读取值的变量表现形式,这就很简单了。那就是colors1值是什么就用前面的什么值。比如colors1为true那就是true了。就知道了,不是说colors1判断为true。

比如我可以这样写

解析angularjs ng-class

那么当colors1='change' 就是用blue这个class。

第三种写法:

上图

解析angularjs ng-class

其实就是对象键值对,谁为真就用谁,这里的真就不一定非得true了,只要是javascript判断为真,都可以。比如上图的例子,运行结果 class="red yellow"

解析angularjs ng-class

那么到底是显示谁的呢?这个就涉及到css的层级了,反正都加上,谁的层级高就显示谁的

总结:

1、第一种方式这里不再叙述

2、第二种方式,其实就是对象读取值,值是什么,那么样式就显示什么

3、第三种方式就是说,谁为真,就把谁的class加上也就是key值,那么显示谁呢?这个就是css层级决定

小女子第一次写博客,初来匝道,希望大家多多指正,之前喜欢写在有道云笔记上面简单记录遇到的问题和解决方法,但是从未发过博客,不过很喜欢CSDN这个平台。

相关文章:

  • 2021-11-27
  • 2021-12-08
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-06-11
猜你喜欢
  • 2021-07-22
  • 2021-09-09
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案