深入淺析AngularJs模版與v-bind

更新時間：2018年07月06日 10:42:01 作者：全村的希望iOS

v-bind與{{}}都可以對數(shù)據(jù)進行綁定，接下來通過本文給大家介紹AngularJs模版與v-bind的相關(guān)知識，感興趣的朋友一起看看吧

簡介

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">結(jié)果是：</span>
</div>

這種做法會將整個span標簽上的text都會替換掉結(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>

所以做開發(fā)的時候盡量使用{{}}。

總結(jié)

以上所述是小編給大家介紹的AngularJs模版與v-bind，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Angular項目如何升級至Angular6步驟全紀錄
這篇文章主要給大家介紹了關(guān)于Angular項目如何升級至Angular6的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-09-09
AngularJs Creating Services詳解及示例代碼
本文主要介紹AngularJs Creating Services的知識資料，這里整理了詳細的資料及簡單示例代碼，有需要的小伙伴可以參考下
2016-09-09
AngularJS入門教程之XHR和依賴注入詳解
本文主要介紹AngularJS XHR和依賴注入，這里整理了詳細資料和示例代碼，有興趣的小伙伴可以參考下
2016-08-08
詳解angularJs中關(guān)于ng-class的三種使用方式說明
本篇文章主要介紹了angularJs中關(guān)于ng-class的三種使用方式說明，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
Angular框架詳解之視圖抽象定義
這篇文章主要給大家介紹了關(guān)于Angular框架詳解之視圖抽象定義的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
基于AngularJS拖拽插件ngDraggable.js實現(xiàn)拖拽排序功能
ngDraggable.js是一款比較簡單實用的angularJS拖拽插件，借助于封裝好的一些自定義指令，能夠快速的進行一些拖拽應(yīng)用開發(fā)。本文先從基本概念入手，給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧
2019-04-04
使用 Angular RouteReuseStrategy 緩存（路由）組件的實例代碼
這篇文章主要介紹了使用 Angular RouteReuseStrategy 緩存（路由）組件的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-11-11
angular中實現(xiàn)控制器之間傳遞參數(shù)的方式
本篇文章主要介紹了angular中實現(xiàn)控制器之間傳遞參數(shù)的方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2017-04-04
從?Angular?Route?中提前獲取數(shù)據(jù)的方法詳解
這篇文章主要介紹了從?Angular?Route?中提前獲取數(shù)據(jù),通過本文，你將學(xué)會使用?resolver，?在?Angular?App?中應(yīng)用?resolver，應(yīng)用到一個公共的預(yù)加載導(dǎo)航，本文給大家介紹的非常詳細，需要的朋友可以參考下
2022-07-07
Web開發(fā)使用Angular實現(xiàn)用戶密碼強度判別的方法
這篇文章主要介紹了Web開發(fā)使用Angular實現(xiàn)用戶密碼強度判別的方法,需要的朋友可以參考下
2017-09-09