深入淺析AngularJs模版與v-bind
更新時間：2018年07月06日 10:42:01 作者：全村的希望iOS
v-bind與{{}}都可以對數(shù)據(jù)進行綁定，接下來通過本文給大家介紹AngularJs模版與v-bind的相關知識，感興趣的朋友一起看看吧
簡介
v-bind與{{}}都可以對數(shù)據(jù)進行綁定，但是二者有區(qū)別的，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}}*{}=>{{a*b}})<span/>
</div>
所以做開發(fā)的時候盡量使用{{}}。
總結
以上所述是小編給大家介紹的AngularJs模版與v-bind，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
AngularJS是為了克服HTML在構建應用上的不足而設計的。HTML是一門很好的為靜態(tài)文本展示設計的聲明式語言，但要構建WEB應用的話它就顯得乏力了。所以我做了一些工作（你也可以覺得是小花招）來讓瀏覽器做我想要的事。2014-12-12
解決angular雙向綁定無效果,ng-model不能正常顯示的問題
今天小編就為大家分享一篇解決angular雙向綁定無效果,ng-model不能正常顯示的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
Angularjs注入攔截器實現(xiàn)Loading效果
angularjs作為一個全ajax的框架，對于請求，如果頁面上不做任何操作的話，在結果反回來之前，頁面是沒有任何響應的，不像普通的HTTP請求，會有進度條之類2015-12-12
這篇文章主要介紹了AngularJs表單校驗功能實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
這篇文章主要為大家介紹了AngularJs動態(tài)加載模塊和依賴注入，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了AngularJs 延時器、計時器實例代碼,需要的朋友可以參考下2017-09-09
這篇文章主要給大家介紹了關于Angular2使用jQuery的方法教程，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來跟著小編一起學習學習吧。2017-05-05
這篇文章主要介紹了AngualrJs清除定時器遇到的坑,需要的朋友可以參考下2017-10-10
今天小編就為大家分享一篇Angularjs之ngModel中的值驗證綁定方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Angular2 NgModule 模塊詳解的相關資料,并附簡單實例，需要的朋友可以參考下2016-10-10