欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中v-bind與v-model的區(qū)別舉例詳解

 更新時間：2023年09月11日 09:14:22   作者：哆啦哆啦AA  
這篇文章主要給大家介紹了關(guān)于vue中v-bind與v-model區(qū)別的相關(guān)資料,v-model和v-bind是Vue.js框架中的兩個常用指令,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下

v-model與v-bind區(qū)別：

1、v-bind是單向綁定，用來綁定數(shù)據(jù)和屬性以及表達(dá)式，數(shù)據(jù)只能從data流向頁面。

2、v-model是雙向綁定，數(shù)據(jù)能從data流向頁面，也能從頁面流向data。

3、v-bind可以給任何屬性賦值，v-model只能給表單類，也就是具有value屬性的元素進(jìn)行數(shù)據(jù)雙向綁定，如text、radio、checkbox、selected。

這個原因也很好理解，從頁面流向data，v-model是捕獲用戶的輸入值，如果沒有value,捕獲不了，所以這個流向沒有意義，v-model就是收集value值。

例子：

使用v-bind單向綁定

修改data中的值，文本框也會變

修改文本框的值，data不會變

使用v-model雙向綁定

文本框的內(nèi)容變化，data中的值也會變，反之如此；同時單向文本框的內(nèi)容也會變化，因?yàn)閐ata變化了。 

<body>
    <div id="root">
        <!-- 簡寫 -->
        單向數(shù)據(jù)綁定<input type="text" name="" id="" :value='name'><br />
        雙向數(shù)據(jù)綁定<input type="text" name="" id="" v-model='name'>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                name: '單向數(shù)據(jù)綁定與雙向'
            }
        })
    </script>
</body>

總結(jié) 

到此這篇關(guān)于vue中v-bind與v-model區(qū)別的文章就介紹到這了,更多相關(guān)v-bind與v-model區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論