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 相关文章推荐
Javascript String对象扩展HTML编码和解码的方法
Jun 02 Javascript
js校验表单后提交表单的三种方法总结
Feb 28 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
js实现鼠标拖动功能
Mar 20 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
详解vuex commit保存数据技巧
Dec 25 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 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编程中10个最常见的错误
2014/08/08 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
用户注册常用javascript代码
2009/08/29 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
python迭代器的使用方法实例
2013/11/21 Python
python爬取51job中hr的邮箱
2016/05/14 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
python实现用户管理系统
2018/01/10 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
违反学校规定检讨书
2014/01/18 职场文书
无故旷工检讨书
2014/01/26 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
土地转让协议书
2014/04/15 职场文书
股票投资建议书
2014/05/19 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
迎新生欢迎词
2015/01/23 职场文书
小学毕业感言200字
2015/07/30 职场文书
辞职申请书范本
2019/05/20 职场文书