文档章节

Angular数据绑定

前端笔记
 前端笔记
发布于 2017/05/10 17:56
字数 283
阅读 54
收藏 0

Angular数据绑定主要内容在于方括号[ ],和圆括号()还有花括号{}的使用

方括号[ ]

属性名加上方括号后,右侧赋值为表达式的值

如果属性没有方括号,右侧赋值为字符串

<div class="red">red</div>    //这里类名为red
<div [class]="red">red</div>  //这里类名为blue,就是说有方括号右侧为表达式

//组件中
red: string = "blue";

 

圆括号( )

圆括号用于事件绑定,就是触发元素上的事件,绑定的方法就会响应,如

<div (click)="go()">gogo</div>   //圆括号里面放事件

//组件类
go() {
 //表达式...
}

 

花括号{{   }}

使用花括号{{表达式}}这种方法称之为插值,可以放在模板中,注意里面的表达式不能用于赋值、运算等操作,用于显示一些值还是可以的。

<div>{{good}}</div>   //<div>你好</div> 

//组件类
good: string = "你好";

 

最后说一下字符串变量`${ }`,这个的用法,比如说用于赋值,注意加上` `反引号

goo: string = "你好";
good: string = `亲爱的${goo}`;   //等于good: string = "亲爱的你好";

 

© 著作权归作者所有

上一篇: Angular HTTP服务
前端笔记
粉丝 4
博文 70
码字总数 50296
作品 0
杭州
前端工程师
私信 提问
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
2018/05/19
0
0
学习 AngularJS (一)

进一步看入 kityminder-editor 部分了, 打开示例文件 index.html, 开头就是引入三个著名 js 开源库: jQuery.js, bootstrap.js, angular.js 这意味着我又得学习了解这些库都是干什么的了. 略知...

刘军兴
2015/12/04
235
0
angular.js 1.4.1 发布,HTML的Web框架

angular.js 1.4.1 发布,更新内容如下: Bug 修复: **$compile:** + - workaround for IE11 MutationObserver + ([f3b1d0b7](https://github.com/angular/angular.js/commit/f3b1d0b723298a......

oschina
2015/06/17
2.5K
22
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
308
2

没有更多内容

加载失败,请刷新页面

加载更多

Go 关闭 channel 的 close 方法

在 Go 中我们所以 close() 来关闭一个 channel 官方的注释如下 The close built-in function closes a channel, which must be either bidirectional or send-only. It should be executed o......

mickelfeng
24分钟前
3
0
语音转文字什么方法比较简单

在很多时候一些比较重要的对话需要录制下来,在录制完成后还需要整理出文字,可是长时间的录音内容想要整理出文字是非常的麻烦的。需要花费大量的时间将录制的声音转换成文字,那么想要简单快...

401恶户
28分钟前
5
0
IIS7配置thinkphp5项目到public目录下

有个项目,tp5写的,要配置到项目的public目录下,一开始报错了...后面删除了配置,重新配置成功了,记录一下过程 1.首先,将网站根目录变为你的public目录下 2.添加解析程序的CGI,这里选择你需要解...

老bia同学
32分钟前
10
0
Redis主从复制的配置和实现原理

Redis的持久化功能在一定程度上保证了数据的安全性,即便是服务器宕机的情况下,也可以保证数据的丢失非常少。通常,为了避免服务的单点故障,会把数据复制到多个副本放在不同的服务器上,且...

TurboSanil
34分钟前
8
0
counsul 集群

1 master节点 cat << EOF > /lib/systemd/system/consul.service[Unit]Description=consul-masterAfter=network-online.target [Service]ExecStart=/bin/sh -c 'consul agent ......

拜了个拜
34分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部