vue指令之表單控件綁定v-model v-model與v-bind結(jié)合使用
一、表單控件綁定v-model
v-model 雙向數(shù)據(jù)綁定；一般用于表單元素，會忽略表單元素的value、checked、selected的初始值，且將Vue實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來源。
① 單行文本框 input[type="text"] 、多行文本框 textarea：
v-model值綁定到value屬性；
<body>
<div id="app">
<input type="text" v-model="username" value="我是初始值，但是我被忽略了"><br/>
<textarea v-model="schoolname" value="我是初始學(xué)校：北大青鳥"></textarea><br/>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
username:'小鳴',
schoolname:'XX科技大學(xué)'
}
})
</script>
</body>
ps：下面看下Vue v-bind v-model的使用
v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定,所謂雙向綁定，指的就是我們在js中的vue實(shí)例中的data與其渲染的dom元素上的內(nèi)容保持一致，兩者無論誰被改變，另一方也會相應(yīng)的更新為相同的數(shù)據(jù)
最基礎(chǔ)的就是實(shí)現(xiàn)一個(gè)聯(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
有些指令可以在其名稱后面帶一個(gè)“參數(shù)” (Argument)，中間放一個(gè)冒號隔開。例如，v-bind 指令用于響應(yīng)地更新 HTML 特性
總結(jié)
以上所述是小編給大家介紹的vue指令之表單控件綁定v-model v-model與v-bind結(jié)合使用 ,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
隨著vue2的落幕,vue3越來成熟,有必要更新一下vue3的父子組件之間的傳值方式,這里介紹下vue3+vite+ts父子組件之間的傳值方式實(shí)例詳解,感興趣的朋友一起看看吧2023-12-12
解決vue使用vant輪播組件swipe + flex時(shí)文字抖動問題
這篇文章主要介紹了解決vue使用vant輪播組件swipe + flex時(shí)文字抖動問題，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-01-01
vue 實(shí)現(xiàn) ios 原生picker 效果及實(shí)現(xiàn)思路解析
這篇文章主要介紹了vue 實(shí)現(xiàn) ios 原生picker 效果及實(shí)現(xiàn)思路解析,本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-12-12
在vue2項(xiàng)目中，組件間相互傳值或者后臺獲取的數(shù)據(jù)需要供多個(gè)組件使用的情況很多的情況下（后臺獲取數(shù)據(jù)存入vuex，組件之間共享數(shù)據(jù)），那么就需要用vuex來管理這些。2017-05-05
vue如何對一個(gè)數(shù)據(jù)過濾出想要的item
這篇文章主要介紹了vue如何對一個(gè)數(shù)據(jù)過濾出想要的item問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
ElementUI中el-input無法輸入、修改及刪除問題解決辦法
這篇文章主要給大家介紹了關(guān)于ElementUI中el-input無法輸入、修改及刪除問題的解決辦法,這種問題產(chǎn)生是因?yàn)閕nput在vue中的受控,我們需要去重新改變一下監(jiān)聽和實(shí)現(xiàn),需要的朋友可以參考下2023-11-11
組件是 vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。這篇文章主要介紹了vue組件間通信六種方式,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了在Vue中實(shí)現(xiàn)添加全局store方法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)手機(jī)計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了Vertx基于EventBus發(fā)送接受自定義對象,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11