對(duì)Vue- 動(dòng)態(tài)元素屬性及v-bind和v-model的區(qū)別詳解
Mustache (雙大括號(hào)寫法)不能在 HTML 屬性中使用，應(yīng)使用 v-bind 指令：
<div v-bind:id="dynamicId"></div>
這對(duì)布爾值的屬性也有效 —— 如果條件被求值為 false 的話該屬性會(huì)被移除：
<button v-bind:disabled="someDynamicCondition">Button</button>
從一開始學(xué)習(xí)的時(shí)候我們就知道v-bind是可以綁定屬性和數(shù)據(jù)的，而v-model也一樣可以綁定數(shù)據(jù)，那么v-bind和v-model的區(qū)別在哪里？
1：如果 id={{xxx}}這種寫法，則HTML實(shí)際上是這樣的：id="{{ xxx}}"
2:v-bind用于綁定屬性和數(shù)據(jù) ，其縮寫為“ : ” 也就是v-bind:id === :id
3:v-model也可以綁定數(shù)據(jù)，但是他是用在表單控件上的，用于實(shí)現(xiàn)雙向數(shù)據(jù)綁定，所以如果你用在除了表單控件以外的標(biāo)簽是沒(méi)有任何效果的。
1:v-bind動(dòng)態(tài)綁定指令，默認(rèn)情況下標(biāo)簽自帶屬性的值是固定的，在為了能夠動(dòng)態(tài)的給這些屬性添加值，可以使用v-bind:你要?jiǎng)討B(tài)變化的值="表達(dá)式"
<input class="frmD" type="hidden" v-bind:lenderEnterprise.name="check4EP.name?lenderEnterprise.name:null"/>
2:v-bind用于綁定屬性和數(shù)據(jù) ，其縮寫為“ : ” 也就是v-bind:id === :id
3:v-model用在表單控件上的，用于實(shí)現(xiàn)雙向數(shù)據(jù)綁定，所以如果你用在除了表單控件以外的標(biāo)簽是沒(méi)有任何效果的。
以上這篇對(duì)Vue- 動(dòng)態(tài)元素屬性及v-bind和v-model的區(qū)別詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3語(yǔ)法中使用vscode打開滿屏紅線報(bào)錯(cuò)的完美解決方法
這篇文章主要介紹了vue3語(yǔ)法中使用vscode打開滿屏紅線報(bào)錯(cuò)的完美解決方法,本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
在?Vue?中使用?dhtmlxGantt?組件時(shí)遇到的問(wèn)題匯總(推薦)
dhtmlxGantt一個(gè)功能豐富的甘特圖插件，支持任務(wù)編輯，資源分配和多種視圖模式，這篇文章主要介紹了在?Vue?中使用?dhtmlxGantt?組件時(shí)遇到的問(wèn)題匯總,需要的朋友可以參考下2023-03-03
在Vue中實(shí)現(xiàn)Excel導(dǎo)出功能(數(shù)據(jù)導(dǎo)出)
本文分享了如何在前端導(dǎo)出Excel文件,強(qiáng)調(diào)了前端導(dǎo)出的即時(shí)性、便捷性、靈活性和定制化優(yōu)勢(shì),以及減輕后端服務(wù)器負(fù)擔(dān)的特點(diǎn),詳細(xì)介紹了ExcelJS和FileSaver.js兩個(gè)工具庫(kù)的使用方法和主要功能,最后通過(guò)Vue實(shí)現(xiàn)了Excel的導(dǎo)出功能2024-10-10
Vue+Element實(shí)現(xiàn)頁(yè)面生成快照截圖
這篇文章主要為大家詳細(xì)介紹了Vue如何結(jié)合Element實(shí)現(xiàn)頁(yè)面生成快照截圖功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
vue中使用element ui的input框?qū)崿F(xiàn)模糊搜索的輸入框
這篇文章主要介紹了vue中使用element ui的input框?qū)崿F(xiàn)模糊搜索的輸入框,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
typescript不僅可以約束我們的編碼習(xí)慣，還能起到注釋的作用，當(dāng)我們看到一函數(shù)后我們立馬就能知道這個(gè)函數(shù)的用法。這篇文章主要介紹了在Vue組件中使用 TypeScript的方法,需要的朋友可以參考下2018-02-02
electron+vue?實(shí)現(xiàn)靜默打印功能
這篇文章主要介紹了electron+vue?實(shí)現(xiàn)靜默打印功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
在 Vue 3 中設(shè)置 `@` 指向根目錄的幾種常見方法匯總
在 Vue 3 項(xiàng)目開發(fā)中,為了方便管理和引用文件路徑,設(shè)置 @ 指向根目錄是一項(xiàng)常見的需求,下面給大家分享在Vue3中設(shè)置 `@` 指向根目錄的方法匯總,感興趣的朋友一起看看吧2024-06-06
這篇文章主要介紹了vue3動(dòng)態(tài)添加路由,文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-06-06
vue-cli 項(xiàng)目打包完成后運(yùn)行文件路徑報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了vue-cli 項(xiàng)目打包完成后運(yùn)行文件路徑報(bào)錯(cuò)問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07