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

更新時間：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ù)綁定,所謂雙向綁定，指的就是我們在js中的vue實(shí)例中的data與其渲染的dom元素上的內(nèi)容保持一致，兩者無論誰被改變，另一方也會相應(yīng)的更新為相同的數(shù)據(jù)

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

<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

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

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