Angular开发(三)-关于属性绑定与事件绑定

一、新建一个项目工程并创建一个组件`bind`,如果还有不知道怎么创建`angular`项目的请先查看Angular2从环境搭建到开发建议直接用`angular-cli`创建

二、数据绑定

插值的方式[比较常见]，就是把利用(金甲二模板:{{ 插入的内容}})来展现component里面的数据

在bind.component.html页面中
<p>1.我是采用插值的方式的:</p>
<span>{{title}}</span>

在bind.component.ts文件中
....
export class BindComponent implements OnInit {title:string = "我是子组件插值的方式显示的";....
}

属性绑定
- 使用金甲二的模板插入值
- 使用[属性]=“值”进行属性绑定(属性如果不加[],那么就直接是传统的赋值，加上[]就是angular中属性绑定)

<p>2.属性绑定:</p>
<img src="{{src}}"/>
<p>3.属性绑定:</p>
<img [src]="src"/>

biind.component.ts文件代码
src:string = "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png";

事件绑定

<p>4.事件绑定:</p>
<input type="button" value="按钮" (click)="info($event)"/>

bind.component.ts文件
info(event:any){console.log(event);}

三、`DOM`绑定与`HTML`属性绑定的区别

-	DOM绑定	HTML绑定
相同情况下	一个元素的id
有html属性无dom属性		表格中td的colspan
有dom属性无html属性	textContent属性
关于值	dom表示当前值	html表示初始化值
关于可变	dom值是可变的	html值是不可变的

总结:我们模板绑定是通过DOM属性来操作的，不是HTML属性来操作的

四、HTML绑定

table style="border-collapse:collapse" border="1" width="100%"><tr><td>第一个</td><td>第二个</td></tr><tr><td [attr.colspan]="sizeNum">我占2格子</td></tr>
</table>

五、`class`类的绑定

直接使用[class]DOM绑定会覆盖之前的class

<div class="a b" [class]="classname"></div>
//bind.component.ts文件
classname:string = "c";

使用[class.类名]=”boolean”来判断是否追加这个class

<div class="a b" [class.c]="isShow"></div>
//bind.component.ts文件
isShow:boolean = true;

使用对象显示

<div [ngClass]={a:isA,b:isB,c:isC}></div>
//bind.component.ts文件
isA:boolean = true;
isB:boolean = true;
isC:boolean = true;
//或者
<div [ngClass]="classGroup"></div>
//bind.component.ts文件
classGroup:any = {a:true,b:true,c:true}

六、样式绑定

绑定单个样式

<p [style.color]="isRed?'red':'blue'">我是测试样式的</p>
<p [style.color]="redColor">我是测试样式的</p>
//bind.component.ts文件
isRed:boolean = true;
redColor:string = "red";

带单位的

<p [style.font-size.em]="fontSize?1:3">我是测试样式的</p>
//bind.component.ts
fontSize:boolean = false;

绑定多个样式

<div [ngStyle]="styleGroup"></div>
//bind.component.ts
styleGroup:any = {width:"100px",height:"100px",border:"1px solid #ddd",margin:"20px"
}

七、双向绑定

双向绑定仅仅是之前的属性绑定与事件绑定的结合，所以是[(ngModel)]=”“

<p>双向数据绑定:</p>
<input type="text" [(ngModel)]="user.name"/>
<div [ngStyle]="style1">{{user.name}}</div>
//ts代码
user:any = {name:""}

Angular开发(三)-关于属性绑定与事件绑定相关推荐

vue2.1-本地应用-内容绑定，事件绑定
一.内容绑定,事件绑定 1.v.text-设置标签的文本值  <!DOCTYPE html> <html lang="en"&g ...
angular条件渲染、列表渲染、属性绑定、样式绑定、事件绑定
文章目录属性绑定样式绑定绑定单一样式绑定多个样式用 NgStyle 设置内联样式类绑定绑定单个类样式绑定到多个 CSS 类用 NgClass 添加和删除类条件渲染列表渲染 *ng ...
angular 双向绑定和事件绑定实现输入框内容输出
双向绑定(即属性和事件) 格式 [(ngModule)]=" " html文件内容 <h1> <a>双向绑定:</a><input [(n ...
jQuery的三种bind/One/Live事件绑定使用方法
jQuery是一款优秀的JavaScript框架,在旧版里主要用bind()方法,在新版里又多了两种One(),Live(),下面介绍这几种方法的使用: 1. bind/Unbind 在jquery ...
Angular属性绑定，class绑定，事件绑定，属性样式绑定
多谢大佬指正,原创转载连接. 属性绑定插值表达式:src="{{user.pic}}" 使用: [ ] :[property]="变量" 使用:bind-:b ...
day05【JQuery框架】HTML引入Jquery、jQuery与JS区别、基本选择器、层级关系选择器、属性选择器、过滤选择器、对象遍历、Jquery的DOM操作【重点】、Jquery事件绑定
回顾 1. bom对象window对象三种弹框alert()confirm()prompt()二种定时器一次性:setTimout() --- 通过递归实现循环性循环性:setInterval()lo ...
原生JS事件绑定的三种方式
JavaScript绑定事件的方法要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定"事件处理函数".所谓事件处理函数,就是处理用户操作的函数,不同的 ...
深入解析react关于事件绑定this的四种方式
这篇文章主要介绍了详解react关于事件绑定this的四种方式,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 在react组件中,每个方法的上下 ...
jq父级绑定事件的意义_js、jq事件绑定方式总结——以click事件为例
一.JavaScript点击事件绑定方法 1.1 HTML onclick事件属性 1 click me 1 functionclickMe(this) {2 alert("click me ...

Angular开发(三)-关于属性绑定与事件绑定

一、新建一个项目工程并创建一个组件`bind`,如果还有不知道怎么创建`angular`项目的请先查看Angular2从环境搭建到开发建议直接用`angular-cli`创建

二、数据绑定

三、`DOM`绑定与`HTML`属性绑定的区别

四、HTML绑定

五、`class`类的绑定

六、样式绑定

七、双向绑定

Angular开发(三)-关于属性绑定与事件绑定相关推荐

最新文章

热门文章

Angular开发(三)-关于属性绑定与事件绑定

一、新建一个项目工程并创建一个组件bind,如果还有不知道怎么创建angular项目的请先查看Angular2从环境搭建到开发建议直接用angular-cli创建

二、数据绑定

三、DOM绑定与HTML属性绑定的区别

四、HTML绑定

五、class类的绑定

六、样式绑定

七、双向绑定

Angular开发(三)-关于属性绑定与事件绑定相关推荐

最新文章

热门文章

一、新建一个项目工程并创建一个组件`bind`,如果还有不知道怎么创建`angular`项目的请先查看Angular2从环境搭建到开发建议直接用`angular-cli`创建

三、`DOM`绑定与`HTML`属性绑定的区别

五、`class`类的绑定