快捷導(dǎo)航

淺析Vue.js中v-bind v-model的使用和區(qū)別

更新時(shí)間：2018年12月04日 08:00:55 作者：itKingOne

v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定,所謂雙向綁定。這篇文章主要介紹了Vue.js中v-bind v-model的使用和區(qū)別,需要的朋友可以參考下

v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定,所謂雙向綁定，指的就是我們?cè)趈s中的vue實(shí)例中的data與其渲染的dom元素上的內(nèi)容保持一致，兩者無(wú)論誰(shuí)被改變，另一方也會(huì)相應(yīng)的更新為相同的數(shù)據(jù)

最基礎(chǔ)的就是實(shí)現(xiàn)一個(gè)聯(lián)動(dòng)的效果

<body>
  <div class="app">
    <span>Multiline message is:</span>
    <p>{{message}}</p>
    <br>
    <textarea name="" v-model="message" placeholder="please write..."></textarea>
  </div>

</body>
<script>
  new Vue({
     el:'.app'
  })
</script>

checkbox

<body>
  <div class="app">
    <input type="checkbox" id="jack" value="jack" v-model="checkedNames">
    <label for="jack">jack</label>
    <input type="checkbox" id="John" value="John" v-model="checkedNames">
    <label for="jack">John</label>
    <input type="checkbox" id="Mike" value="Mike" v-model="checkedNames">
    <label for="jack">Mike</label>
    <br>
    <span>Checked names:{{checkedNames}}</span>
  </div>
  
</body>
<script>
  new Vue({
     el:'.app',
     data:{
       checkedNames:[]
     }
  })
</script>

v-bind

有些指令可以在其名稱(chēng)后面帶一個(gè)“參數(shù)” (Argument)，中間放一個(gè)冒號(hào)隔開(kāi)。例如，v-bind 指令用于響應(yīng)地更新 HTML 特性

總結(jié)

以上所述是小編給大家介紹的Vue.js中v-bind v-model的使用和區(qū)別，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Vue中實(shí)現(xiàn)滾動(dòng)加載與無(wú)限滾動(dòng)
本文主要介紹了Vue中實(shí)現(xiàn)滾動(dòng)加載與無(wú)限滾動(dòng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-06-06
vue 每次渲染完頁(yè)面后div的滾動(dòng)條保持在最底部的方法
下面小編就為大家分享一篇vue 每次渲染完頁(yè)面后div的滾動(dòng)條保持在最底部的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
三步搞定:Vue.js調(diào)用Android原生操作
這篇文章主要介紹了三步搞定:Vue.js調(diào)用Android原生操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
element el-input directive數(shù)字進(jìn)行控制
本文介紹了vue使用directive 進(jìn)行控制的方法，使用element開(kāi)發(fā)的過(guò)程中遇到循環(huán)的數(shù)據(jù)只能輸入數(shù)字，并且有不要小數(shù)點(diǎn)，有需要小數(shù)點(diǎn)的，就有一定的參考價(jià)值，有興趣的可以了解一下
2018-10-10
vue3中虛擬dom的介紹與使用詳解
Vue?是如何將一份模板轉(zhuǎn)換為真實(shí)的?DOM?節(jié)點(diǎn)的,又是如何高效地更新這些節(jié)點(diǎn)的呢,這些都離不開(kāi)虛擬dom這個(gè)概念,下面我們就來(lái)了解下虛擬dom這個(gè)概念以及它是什么吧
2024-01-01
vue中的v-if和v-show的區(qū)別詳解
這篇文章主要介紹了vue中的v-if和v-show的區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
解決node-sass安裝報(bào)錯(cuò)無(wú)python等情況
在國(guó)內(nèi)安裝node-sass常因無(wú)法穩(wěn)定連接GitHub而失敗,解決方法包括手動(dòng)下載對(duì)應(yīng)的binding.node文件并放入緩存目錄,操作步驟詳細(xì),適合非Python用戶(hù),無(wú)需額外環(huán)境配置
2024-10-10
Vue+Router+Element實(shí)現(xiàn)簡(jiǎn)易導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了Vue+Router+Element實(shí)現(xiàn)簡(jiǎn)易導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
Vue中$nextTick實(shí)現(xiàn)源碼解析
這篇文章主要為大家介紹了Vue中$nextTick實(shí)現(xiàn)源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
vue3封裝自己的分頁(yè)組件
這篇文章主要為大家詳細(xì)介紹了vue3封裝自己的分頁(yè)組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09