AngularJS 中括号的作用详解

更新时间：2021年04月02日 10:21:14 作者：Java Pro

这篇文章主要介绍了AngularJS 中括号的作用,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

1.括号的作用

1.1方括号 [ ]

属性名加上方括号后，右侧赋值为 表达式的值
如果属性没有方括号，右侧赋值为 字符串

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

1.2 圆括号( )

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

<div (click)="go()">gogo</div>  //圆括号里面放事件
 
//组件类
go() {
 //表达式...
}

1.3 花括号 {{ }}

使用花括号 {{表达式}} 这种方法称之为插值，可以放在模板中

<div>{{good}}</div>  //<div>你好</div> 
 
//组件类
good: string = "你好";

1.4 字符串变量`${ }`

举例

tes: string = "World";
test: string = `Hello ${goo}`;  //test: string = "Hello World";

1.5 [()]

常用的来做双向绑定的操作

<input [(ngModel)]='test_input' /> // value= 'testNgClick'
 
//组件中 
test_input: any = 'testNgClick';

到此这篇关于AngularJS 中括号的作用的文章就介绍到这了,更多相关AngularJS括号的作用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Angular2实现组件交互的方法分析
这篇文章主要介绍了Angular2实现组件交互的方法,结合实例形式总结分析了Angular2中组件交互的相关操作技巧与注意事项,需要的朋友可以参考下
2017-12-12
浅谈Angular7 项目开发总结
这篇文章主要介绍了浅谈Angular7 项目开发总结，本文在此做一次遇到问题的总结，以便知识的掌握，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
AngularJs定制样式插入到ueditor中的问题小结
这篇文章主要介绍了AngularJs定制样式插入到ueditor中的问题小结的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-08-08
Ionic + Angular.js实现验证码倒计时功能的方法
验证码倒计时这个功能相信对大家每个人来说都不陌生，之前介绍了在Android中的实现方法，下面这篇文章主要给大家介绍了利用Ionic + Angular.js实现验证码倒计时功能的相关资料，文中介绍的非常详细，需要的朋友们下面来一起看看吧。
2017-06-06
详解angular部署到iis出现404解决方案
这篇文章主要介绍了详解angular部署到iis出现404解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
再谈Angular4 脏值检测(性能优化)
这篇文章主要介绍了再谈Angular4 脏值检测(性能优化)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
Angular简单验证功能示例
这篇文章主要介绍了Angular简单验证功能,涉及AngularJS事件响应、正则判定、页面元素属性动态修改等相关操作技巧,需要的朋友可以参考下
2017-12-12
Angular4 Select选择改变事件的方法
今天小编就为大家分享一篇Angular4 Select选择改变事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-10-10
angular2实现统一的http请求头方法
今天小编就为大家分享一篇angular2实现统一的http请求头方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
angular select 默认值设置方法
下面小编就为大家带来一篇angular select 默认值设置方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06