深入浅析AngularJs模版与v-bind


Posted in Javascript onJuly 06, 2018

简介

v-bind与{{}}都可以对数据进行绑定,但是二者有区别的,v-bind不好,为什么说v-bind不好是因为v-bin做了完全替换的错做,如果你想做字符串的拼接那么v-bind不是很好的选择,下面看例子。

代码段来喽

比如我们有个这样的需求我们定义一个变量a和一个变量b,计算变量a*b的值显示出来。

我去多简单呀,这玩意也好意思写简书,快回家种地吧!哈哈。

我们要的输出样式是酱紫的(a*b)=>a*b例如:(3*4)=>12

<div ng-app="" ng-init="a=3;b=4">
<input type="text" ng-model="a"/>*<input type="text" ng-model="b" />
=<span v-bind="a*b">结果是:</span>
</div>

这种做法会将整个span标签上的text都会替换掉结果只显示12

<div ng-app="" ng-init="a=3;b=4">
<input type="text" ng-model="a"/>*<input type="text" ng-model="b"/>
=<span>({{a}}*{{b}}=>{{a*b}})<span/>
</div>

所以做开发的时候尽量使用{{}}。

总结

以上所述是小编给大家介绍的AngularJs模版与v-bind,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript客户端脚本的设计和应用
Aug 21 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
angular4实现tab栏切换的方法示例
Oct 21 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
原生JS实现相邻月份日历
Oct 13 Javascript
vue中子组件调用兄弟组件方法
Jul 06 #Javascript
vue中element 上传功能的实现思路
Jul 06 #Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 #Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 #Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 #Javascript
用Node提供静态文件服务的方法
Jul 06 #Javascript
vue使用监听实现全选反选功能
Jul 06 #Javascript
You might like
PHP实现文件下载断点续传详解
2014/10/15 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
php中stdClass的用法分析
2015/02/27 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
PyTorch预训练的实现
2019/09/18 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
自荐信怎么写好
2013/11/11 职场文书
品质主管的岗位职责
2013/12/04 职场文书
关于幼儿的自我评价
2013/12/18 职场文书
《老山界》教学反思
2014/04/08 职场文书
化学教育专业求职信
2014/07/08 职场文书
四年级小学生评语
2014/12/26 职场文书
店铺转让协议书
2015/01/29 职场文书
安全伴我行主题班会
2015/08/13 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
利用Python多线程实现图片下载器
2022/03/25 Python
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server