深入浅析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 相关文章推荐
jQuery each()方法的使用方法
Mar 18 Javascript
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 Javascript
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 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结合md5实现的加密解密方法
2016/01/25 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
js自带函数备忘 数组
2006/12/29 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
python 切片和range()用法说明
2013/03/24 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
python调用百度语音REST API
2018/08/30 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
python 实现波浪滤镜特效
2020/12/02 Python
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
超市营业员岗位职责
2013/12/20 职场文书
交通志愿者活动总结
2014/06/27 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
工作年限证明范本
2015/06/15 职场文书
学校运动会开幕词
2016/03/03 职场文书