深入淺析AngularJs模版與v-bind
更新時(shí)間：2018年07月06日 10:42:01 作者：全村的希望iOS
v-bind與{{}}都可以對(duì)數(shù)據(jù)進(jìn)行綁定，接下來(lái)通過(guò)本文給大家介紹AngularJs模版與v-bind的相關(guān)知識(shí)，感興趣的朋友一起看看吧
簡(jiǎn)介
v-bind與{{}}都可以對(duì)數(shù)據(jù)進(jìn)行綁定，但是二者有區(qū)別的，v-bind不好，為什么說(shuō)v-bind不好是因?yàn)関-bin做了完全替換的錯(cuò)做，如果你想做字符串的拼接那么v-bind不是很好的選擇，下面看例子。
代碼段來(lái)嘍
比如我們有個(gè)這樣的需求我們定義一個(gè)變量a和一個(gè)變量b，計(jì)算變量a*b的值顯示出來(lái)。
我去多簡(jiǎn)單呀，這玩意也好意思寫(xiě)簡(jiǎn)書(shū)，快回家種地吧！哈哈。
我們要的輸出樣式是醬紫的(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">結(jié)果是：</span> </div>
這種做法會(huì)將整個(gè)span標(biāo)簽上的text都會(huì)替換掉結(jié)果只顯示12
<div ng-app="" ng-init="a=3;b=4">
<input type="text" ng-model="a"/>*<input type="text" ng-model="b"/>
=<span>({{a}}*{}=>{{a*b}})<span/>
</div>
所以做開(kāi)發(fā)的時(shí)候盡量使用{{}}。
總結(jié)
以上所述是小編給大家介紹的AngularJs模版與v-bind，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
AngularJS是為了克服HTML在構(gòu)建應(yīng)用上的不足而設(shè)計(jì)的。HTML是一門(mén)很好的為靜態(tài)文本展示設(shè)計(jì)的聲明式語(yǔ)言，但要構(gòu)建WEB應(yīng)用的話(huà)它就顯得乏力了。所以我做了一些工作（你也可以覺(jué)得是小花招）來(lái)讓瀏覽器做我想要的事。2014-12-12
解決angular雙向綁定無(wú)效果,ng-model不能正常顯示的問(wèn)題
今天小編就為大家分享一篇解決angular雙向綁定無(wú)效果,ng-model不能正常顯示的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
Angularjs注入攔截器實(shí)現(xiàn)Loading效果
angularjs作為一個(gè)全ajax的框架，對(duì)于請(qǐng)求，如果頁(yè)面上不做任何操作的話(huà)，在結(jié)果反回來(lái)之前，頁(yè)面是沒(méi)有任何響應(yīng)的，不像普通的HTTP請(qǐng)求，會(huì)有進(jìn)度條之類(lèi)2015-12-12
這篇文章主要介紹了AngularJs表單校驗(yàn)功能實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
AngularJs動(dòng)態(tài)加載模塊和依賴(lài)注入詳解
這篇文章主要為大家介紹了AngularJs動(dòng)態(tài)加載模塊和依賴(lài)注入，感興趣的小伙伴們可以參考一下2016-01-01
AngularJs 延時(shí)器、計(jì)時(shí)器實(shí)例代碼
這篇文章主要介紹了AngularJs 延時(shí)器、計(jì)時(shí)器實(shí)例代碼,需要的朋友可以參考下2017-09-09
這篇文章主要給大家介紹了關(guān)于Angular2使用jQuery的方法教程，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)跟著小編一起學(xué)習(xí)學(xué)習(xí)吧。2017-05-05
這篇文章主要介紹了AngualrJs清除定時(shí)器遇到的坑,需要的朋友可以參考下2017-10-10
Angularjs之ngModel中的值驗(yàn)證綁定方法
今天小編就為大家分享一篇Angularjs之ngModel中的值驗(yàn)證綁定方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了Angular2 NgModule 模塊詳解的相關(guān)資料,并附簡(jiǎn)單實(shí)例，需要的朋友可以參考下2016-10-10