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 相关文章推荐
js加解密 脚本解密
Feb 22 Javascript
javascript两段代码,两个小技巧
Feb 04 Javascript
jQuery实现动画效果的实例代码
May 07 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
javascript中this用法实例详解
Apr 06 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 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 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
洪恩在线成语词典小偷程序php版
2012/04/20 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
javascript 二进制运算技巧解析
2012/11/27 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
详解Python中的Cookie模块使用
2015/07/06 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
Python+django实现简单的文件上传
2016/08/17 Python
python之django母板页面的使用
2018/07/03 Python
Python判断telnet通不通的实例
2019/01/26 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
Django REST 异常处理详解
2020/07/15 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
python绘图模块之利用turtle画图
2021/02/12 Python
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
4s店总经理岗位职责
2013/12/31 职场文书
大学生简短的自我评价分享
2014/02/20 职场文书
团队激励口号
2014/06/06 职场文书
会计系毕业求职信
2014/08/07 职场文书
房地产端午节活动方案
2014/08/24 职场文书
JS实现九宫格拼图游戏
2022/06/28 Javascript