angular 中的[ngClass]、[ngStyle]
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div> <div [ngClass]="{'red': true, 'blue': false}"> 这是一个 div</div> <div [ngClass]="{'red': flag, 'blue': !flag}">这是一个 div </div> <ul>
<li *ngFor="let item of arr, let i = index"> <span [ngClass]="{'red': i==0}">{{item}}</span>
</li>
</ul> <div [ngStyle]="{'background-color':'green'}">你好 ngStyle</div> <div [ngStyle]="{'background-color':attr}">你好 ngStyle</div>
.red{
color: red
}
.blue{color: blue}
import { Component } from '@angular/core'; @Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'angulardemo';
inputValue='0'
attr='red'
arr= [1, 3, 4, 5, 6]
public flag=false;
}
效果:
angular 中的[ngClass]、[ngStyle]的更多相关文章
- Angular 4.x NgClass ngStyle 指令用法
<some-element [ngClass]="'first second'">...</some-element> <some-element [ ...
- angular中ng-class的一些用法
在前面Angularjs开发一些经验总结中我们说到在angular开发中angular controller never 包含DOM元素(html/css),在controller需要一个简单的POJ ...
- Angular中的数据绑定
(1)HTML绑定:{{}} (2)属性绑定:[] 注意:属性绑定通常赋值为变量,如果赋值为常量(如字符串常量) 必须用引号括起来,如<img [src]="'../../assets ...
- Angularjs中的ng-class
在angular中为我们提供了3种方案处理class:1:scope变量绑定.(不推荐使用)2:字符串数组形式.3:对象key/value处理. 我们继续其他两种解决方案:1字符串数组形式是针对cla ...
- (网页)angular中实现li或者某个元素点击变色的两种方法(转)
转自脚本之家: 本篇文章主要介绍了angular中实现li或者某个元素点击变色的两种方法,非常具有实用价值,需要的朋友可以参考下 本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享 ...
- angular中的动画效果
用angular来形成动画效果的代码如下 <!DOCTYPE html> <html lang="en" ng-app="app"> & ...
- Angular中的内置指令和自定义指令
NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...
- Angular中懒加载一个模块并动态创建显示该模块下声明的组件
angular中支持可以通过路由来懒加载某些页面模块已达到减少首屏尺寸, 提高首屏加载速度的目的. 但是这种通过路由的方式有时候是无法满足需求的. 比如, 点击一个按钮后显示一行工具栏, 这个工具栏组 ...
- Angular中ngCookies模块介绍
1.Cookie介绍 Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie.内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时间是短 ...
随机推荐
- 基于Java+Selenium的WebUI自动化测试框架(七)--IE浏览器的设置
在上一篇我们讲了关于WebDriver的版本,浏览器初始化,以及下载的设定. 在设置IE浏览器进行WebDriver的测试时,通常会遇见以下几种错误: 1.没有关闭IE浏览器的保护模式. 当运行测试用 ...
- SASS 和 LESS 的区别
1.编译环境不同 SASS 的安装需要 Ruby 环境,是在服务端处理的: LESS 需要引入 less.js 来处理代码输出 CSS 到浏览器,也可以在开发环节使用 LESS,然后编译成 CSS 文 ...
- IntentService使用
说实话,对于这个类在我实际工作中并没有用到过,通常也只是用了它的父类Service,通过官方文档可以看出类的层次结构: 而在今年的一次面试当中,有个面试官提起了它,所以虽说目前还没有真实在项目中用它, ...
- MyBatis 3.0_[tp-24-25]_映射文件_参数处理_#与$取值区别_#{}更丰富的用法
笔记要点出错分析与总结 /**================Mybatis参数值的获取:#和$符号的区别=============== * #{}:可以获得map中的值或者pojo对象属性的值; * ...
- MySQL进阶11--DDL数据库定义语言--库创建/修改/删除--表的创建/修改/删除/复制
/*进阶 11 DDL 数据库定义语言 库和表的管理 一:库的管理:创建/修改/删除 二:表的管理:创建/修改/删除 创建: CREATE DATABASE [IF NOT EXISTS] 库名; 修 ...
- P1078 文化之旅[最短路]
题目背景 本题是错题,后来被证明没有靠谱的多项式复杂度的做法.测试数据非常的水,各种玄学做法都可以通过(比如反着扫),不代表算法正确.因此本题题目和数据仅供参考. 题目描述 有一位使者要游历各国,他每 ...
- uoj#67 新年的毒瘤【Tarjan】
题目:http://uoj.ac/problem/67 题意:n个节点m条边的图,删除某个节点及他相连的所有边之后,剩下的图就成了一棵树.找出所有这样的节点. 思路:上次去清华面试的B题,当时就是在瞎 ...
- vue 用户登录 路由拦截 vuex cookie
功能: // 页面跳转后发送ajax请求给后端 请求详细信息 //点击课程推荐跳转到推荐课程详细 // 页面刚加载立即执行函数 = mounted <template> <div&g ...
- Linux centOS 6 和 centOS 7一些简单的区别
最明显的是,获取网络端口的命令和IP信息的命令不同了 所以刚安装的centos 7 使用ifconfig查看ip时有可能出现-bash: ifconfig: 未找到命令
- list获取所有上级
/// <summary> /// 获取所有上级 /// </summary> /// <param name="list"></para ...