一. 怎么设置元素的显示和隐藏?
1.1 设置css中的display属性
- display: none; // 隐藏
- display: block; // 显示
- display: inline-block; // 设置行内块元素
1.2 使用angular中的内置指令
Angular内置了 ng-show 、 ng-hide、 ng-if 指令用来控制dom元素的显示或隐藏;
可以将这三个内置指令,分为两大类
ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。
当赋值给ng-show指令的值为false时元素会被隐藏,值为true时元素会显示。ng-hide功能类似,使用方式相反。元素的显示或隐藏是通过改变CSS的display属性值来实现的。
ng-if 是用来根据后面的 表达式 来进行显示和隐藏的;
如果表达式为 真,就 显示 这个元素;
如果表达式为 假,则 隐藏 掉这个元素;
ng-if 与 ng-show 的区别:
ng-if 是 通过 添加或移除 元素, 从而达到显示和隐藏的效果;
- 如果表达式为 假 ,会在HTML中生成一段 注释,并且移除 掉该元素;
- 如果表达式为 真,它会找到之前生成的注释,然后 以这个注释的位置为目标点,在此处动态的 插入 元素,这样就达到了显示的效果;
ng-show 是判断表达式,然后设置css样式,display:block/none 进行显示和隐藏;
- ng-show 指令在表达式为 true 时显示指定的 HTML 元素,否则隐藏指定的 HTML 元素。
- 无论显示或隐藏,该元素都存在;
ng-if 和 ng-show 哪个性能会好点?
个人觉得,不能一下子就下定论,应该是情况而定;