對(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)簽是沒有任何效果的。
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)簽是沒有任何效果的。
以上這篇對(duì)Vue- 動(dòng)態(tài)元素屬性及v-bind和v-model的區(qū)別詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了ant?design?vue的form表單取值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了詳解vue-router 初始化時(shí)做了什么,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
vue模態(tài)框?qū)崿F(xiàn)動(dòng)態(tài)錨點(diǎn)
這篇文章主要為大家詳細(xì)介紹了vue模態(tài)框?qū)崿F(xiàn)動(dòng)態(tài)錨點(diǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Vue動(dòng)態(tài)組件實(shí)現(xiàn)異常處理方法
Vue3動(dòng)態(tài)組件怎么進(jìn)行異常處理？下面本篇文章帶大家聊聊Vue3 動(dòng)態(tài)組件異常處理的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-02-02
今天小編就為大家分享一篇關(guān)于為什么要使用Vuex的介紹，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
vue項(xiàng)目中,前端使用axios與后臺(tái)進(jìn)行數(shù)據(jù)請(qǐng)求或者提交的時(shí)候,如果后臺(tái)沒有設(shè)置跨域,瀏覽器做數(shù)據(jù)請(qǐng)求的時(shí)候就會(huì)報(bào)錯(cuò),這篇文章主要給大家介紹了關(guān)于vue如何解決axios請(qǐng)求前端跨域問題的相關(guān)資料,需要的朋友可以參考下2021-10-10
從Echarts報(bào)錯(cuò)中學(xué)習(xí)Vue3?ref和shallowRef區(qū)別及其組件二次封裝demo
這篇文章主要介紹了從Echarts報(bào)錯(cuò)中學(xué)習(xí)Vue3?ref和shallowRef區(qū)別及其組件二次封裝demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
Vue3+Element?Plus的項(xiàng)目搭建過程詳解
這篇文章主要為大家介紹了Vue3+Element?Plus的項(xiàng)目搭建過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
如何解決this.$refs.form.validate()不執(zhí)行的問題
這篇文章主要介紹了如何解決this.$refs.form.validate()不執(zhí)行的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
Vue實(shí)現(xiàn)動(dòng)態(tài)控制表格列的顯示和隱藏
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)控制表格列的顯示和隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04