angular 数据绑定之[]和{{}}的区别


Posted in Javascript onSeptember 25, 2018

问题描述

在学习angular时,在示例代码写到加载图片时,书中推荐使用单向数据绑定符号[]来绑定图片的路径,然后双花括号的写法是错的。

尝试

首先,按书中推荐的写法:

<img [src]="imgUrl" />

这里就省略了控制器中定义变量的代码。

然后又按书中说错误的方式进行尝试:

<img src="{{ imgUrl }}" />

最后的测试结果发现两种写法都可以正常加载图片,并没有出现将{{ imgUrl }}解析成字符串的问题。

重读

发现没有达到预期的效果,所以就又重新看了一下书中是怎么说的:

如果浏览器在Angular运行起来之前就加载了这段模板,就会尝试以字符串{{ imgUrl }}为Url来加载图片,这当然会得到一个“404 Not found”错误。在Angular运行起来之前,浏览器会在页面显示一个破损的图像。

仔细读了上面的原文,发现出现错误是有条件的。那什么时候才会触发上面的错误呢?

猜测

联想到angularjs中的双花括号,与angular类似,之前在使用的时候就会出现变量没有被正常加载的问题,导致页面直接显示{{...}}的现象。当时出现这种问题是在加载缓慢,或者重复刷新。原因就是模板加载完成了,但是angularjs并没有加载完全。

所以,我就大胆猜测,当angular加载缓慢的时候,{{}}的写法就会出现问题。

(这里笔者经过几次尝试,并没有出现问题。如果有人尝试出,欢迎指正。)

两种绑定的区别

使用[]和{{}}的区别并不大,两者都是一种angular中的单向绑定实现方式,却别就是使用{{}}的形式,会将括号中的表达式解析完成后,再将结果转换成字符串。而[]不会转换成字符串。

总结

有些问题可能以我们目前的水平并不能很好的解释,但是做出一个令自己信服的猜测还是很容易的。哪怕这个猜测在未来的某一天被证实是错误的,那只会是你新的积累的开始。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery解析json数据详解
Dec 26 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
javascript中闭包概念与用法深入理解
Dec 15 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
vue-iview动态新增和删除的方法
Jun 17 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 Javascript
JS函数式编程实现XDM一
Jun 16 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 #Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 #Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 #Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 #Javascript
Vue页面跳转动画效果的实现方法
Sep 23 #Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 #Javascript
vue如何解决循环引用组件报错的问题
Sep 22 #Javascript
You might like
PHP使用Nginx实现反向代理
2017/09/20 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
python flask中动态URL规则详解
2019/11/22 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
工地门卫岗位职责
2013/12/30 职场文书
服务员岗位职责
2014/01/29 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书