angular

文本绑定
html部分：
<p [innerHTML]="msg"></p>可渲染html标签
<p>{{msg}}</p>渲染文字
ts部分：
设置msg值msg='我<em>爱</em>你';

图片绑定
html部分：
三种格式


image.png

ts部分：
url = "https://www.baidu.com/img/bd_logo1.png";

标题绑定
html部分：
<p [title]="msg">我爱我的祖国</p>
ts部分：
title = 'myng'; msg='xxxx';

事件绑定
<button (click)="flag=!flag">变身</button>控制flag的状态为true或false
<button (click)="msg='神奇文本'">神奇文本</button>改变msg内容为神奇文本
<button (click)="msg=event.target.innerHTML">事件参数</button>改变msg内容为事件参数 <button (click)="showMsg(event)">响应函数</button>绑定函数，弹出事件

表单绑定


image.png

列表渲染


image.png

类和样式的绑定


image.png

ts部分：
myclass='active';
mystyle = {color:"blue",'font-size':'38px','font-weight':'900'};
style部分：
.active{color:orangered}

heckbox绑定
html部分：
<input type="checkbox" [(ngModel)]="sel">阅读并同意条款
<button [disabled]="!sel">登录</button>
ts部分：
sel =false;默认不同意

管道--默认管道 过滤器


image.png

截取管道


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容