Angular属性绑定，class绑定，事件绑定，属性样式绑定

多谢大佬指正，原创转载连接。

属性绑定

插值表达式：src="{{user.pic}}"
使用: [ ] :[property]="变量"
使用:bind-:bind-src="变量"

// src/app/app.component.ts

export class AppComponent { picUrl = './image/1.png'; picAlt = 'pic goode';pic = {url: './image/1.png',alt: 'pic goode'};isUnchanged: true;customTitle: 'custom title';
}

// src/app/app.component.html

// 使用 []
<img [src]="picUrl" [alt]="picAlt" />
<button [disabled]="isUnchanged">Disabled Button</button>
/****************** 特别提示 start *********************/
// 这样会报错
<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
// 正确写法
<tr><td [colSpan]="1 + 1">Three-Four</td></tr>
/****************** 特别提示 end **********************/
// 使用bind
<img bind-src="picUrl" bind-alt="picAlt" />
// 插值
<img src="{{ pic.url }}" alt="{{ pic.alt }}" />
// 绑定自定义属性
<span [attr.data-title]="customTitle">some words</span>
<span [attr.title]="customTitle">title</span>

class绑定

绑定单个class

//src/app/app.component.ts

export class AppComponent { theme = 'primary';isSuccess = true;
}

//src/app/app.component.html

<div class="btn" [class.btn-danger]="'吃吃吃吃饭'">danger</div>
<div class="btn" [class.btn-danger]="0">danger</div>
<div class="btn" [class.btn-danger]="undefined">danger</div>
<div class="btn" [class.btn-primary]="theme === 'primary'">Primary</div>
<div class="btn" [class.btn-secondary]="true">secondary</div>
<div class="btn" [class.btn-success]="isSuccess">success</div>

绑定多个class

// src/app/app.component.ts

export class AppComponent { btnCls = 'btn btn-primary'; // 字符串，空格分隔btnCls2 = ['btn', 'btn-success']; btnCls3 = {btn: true,'btn-info': true};
}

// src/app/app.component.html

<div class="btn" [class]="btnCls">btnCls</div>
<div class="btn" [class]="btnCls2">btnCls2</div>
<div class="btn" [class]="btnCls3">btnCls3</div>
<!-- 也可以用内置指令ngClass -->
<div class="btn" [ngClass]="btnCls">btnCls</div>
<div class="btn" [ngClass]="btnCls2">btnCls2</div>
<div class="btn" [ngClass]="btnCls3">btnCls3</div>

属性样式

样式优先级：

某个类或样式绑定越具体，它的优先级就越高
绑定总是优先于静态属性

单一样式绑定

// src/app/app.component.html

<p [style.color]="'pink'">some words</p>
<p [style.height]="'50px'" [style.border]="'1px solid'">属性值中带单位px</p>
<p [style.height.px]="50" [style.border]="'1px solid'">单位px不在属性值中</p>

多重样式绑定

// src/app/app.component.ts

export class AppComponent {style1 = 'width: 200px;height: 50px;text-align: center;border: 1px solid;';style2 = {width: '200px',height: '50px','text-align': 'center',border: '1px solid'};
}

// src/app/app.component.html

<p [style]="style1">style1</p>
<p [style]="style2">style2</p>

绑定事件

// src/app/app.component.ts

export class AppComponent { onClick() {console.log('onClick');};onClick2(event: MouseEvent) {console.log('onClick', event.target);};
}

// src/app/app.component.html

<!-- 不同于vue,这里需要用()来调用函数 -->
<div (click)="onClick()">btn</div>
<!-- 这里一定是$event,就是原生的事件对象-->
<div (click)="onClick2($event)">btn2</div>
<!-- 绑定方法的等号后面可以写任意js代码-->
<div ((click)="$event.preventDefault()">btn2</div>

Angular属性绑定，class绑定，事件绑定，属性样式绑定相关推荐

【Vue 快速入门系列】Vue数据实现本地存储、自定义事件绑定、全局事件总线、$nextTick的使用
文章目录一.本地存储 1.概念 2.接口 3.实际操作二.自定义事件绑定 1.自定义事件使用过程 2.绑定自定义事件的语法 3.其他注意事项三.全局事件总线 1.全局事件总线概念 2.全局事件总 ...
angular条件渲染、列表渲染、属性绑定、样式绑定、事件绑定
文章目录属性绑定样式绑定绑定单一样式绑定多个样式用 NgStyle 设置内联样式类绑定绑定单个类样式绑定到多个 CSS 类用 NgClass 添加和删除类条件渲染列表渲染 *ng ...
Vue Angular 双向绑定检测不到对象属性的添加和删除
由于ES5的限制 Vue && Angular 双向绑定检测不到对象属性的添加和删除还有数组增加索引.这些改变不会触发change事件.Vue是因为实例化的时候已经把各个属性都s ...
Python笔记_64_Vue_M-V-VM思想_显示数据_常用指令_操作属性_绑定事件_操作样式_条件渲染指令_列表渲染指令
文章目录 Vue vue.js的M-V-VM思想快速使用显示数据常用指令操作属性绑定事件操作样式条件渲染指令列表渲染指令 Vue vue.js是目前前端web开发最流行的工具库,由尤雨 ...
Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.事件绑定 4.1.事件绑定(点击.双击.鼠标移动) 点击按钮-最简单的事件绑定(无参函数) 格式点击按钮 ...
[原创]java WEB学习笔记48：其他的Servlet 监听器：域对象中属性的变更的事件监听器（3 个），感知 Session 绑定的事件监听器（2个）...
本博客为原创:综合尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和网络上的现有资源(博客,文档,图书等),资源的出处我会标明本博客的目的:①总结自己的学习过程,相当 ...
08.vue.js实战笔记（计算属性、v-bind及class和style的绑定、内置指令、方法与事件）
1.计算属性所有的计算属性都以函数的形式写在vue实例的computed选项内,最终返回计算后的结果 <!DOCTYPE html> <html lang="en&quo ...
android——databinding中字符串的拼接处理、TextView显示的值随activity的属性值改变同时改变--LiveData、双向绑定过滤器、监听某个值的改变
简介使用的技术是观察者与被观察者的模式,在google推荐的案例中也有使用到,现在我把它封装成一个扩展函数,使得使用更加简单明了注意 1.在build.gradle添加databinding,在a ...
python类中的属性分为类属性和实例属性两种_python中类和实例如何绑定属性与方法示例详解...
前言 python类与实例的方法的调用中觉得云里雾里,思考之后将自己的想法记录下,一来加深自己理解,巩固自己记忆,而来帮助一些想要学习python的朋友理解这门抽象的语言,由于Python是动态语言, ...

Angular属性绑定，class绑定，事件绑定，属性样式绑定

属性绑定

class绑定

绑定单个class

绑定多个class

属性样式

单一样式绑定

多重样式绑定

绑定事件

Angular属性绑定，class绑定，事件绑定，属性样式绑定相关推荐

最新文章

热门文章