vue指令之表單控件綁定v-model v-model與v-bind結(jié)合使用
一、表單控件綁定v-model
v-model 雙向數(shù)據(jù)綁定；一般用于表單元素，會(huì)忽略表單元素的value、checked、selected的初始值，且將Vue實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來(lái)源。
① 單行文本框 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é)校：北大青鳥(niǎo)"></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ù)綁定,所謂雙向綁定，指的就是我們?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
有些指令可以在其名稱后面帶一個(gè)“參數(shù)” (Argument)，中間放一個(gè)冒號(hào)隔開(kāi)。例如，v-bind 指令用于響應(yīng)地更新 HTML 特性
總結(jié)
以上所述是小編給大家介紹的vue指令之表單控件綁定v-model v-model與v-bind結(jié)合使用 ,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了Element MessageBox彈框的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要為大家詳細(xì)介紹了Vue3是如何實(shí)現(xiàn)加載動(dòng)態(tài)菜單功能的，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下2022-07-07
詳解如何配置vue-cli3.0的vue.config.js
這篇文章主要介紹了詳解如何配置vue-cli3.0的vue.config.js，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
實(shí)際項(xiàng)目中偶爾會(huì)遇到給項(xiàng)目頁(yè)面背景加水印的需求,這篇文章主要為大家介紹了Vue使用canvas實(shí)現(xiàn)水印功能的示例代碼，希望對(duì)大家有所幫助2023-07-07
解決Vue數(shù)據(jù)更新了但頁(yè)面沒(méi)有更新的問(wèn)題
在vue項(xiàng)目中,有些我們會(huì)遇到修改完數(shù)據(jù),但是視圖卻沒(méi)有更新的情況,具體的場(chǎng)景不一樣,解決問(wèn)題的方法也不一樣,在網(wǎng)上看了很多文章,在此總結(jié)匯總一下,需要的朋友可以參考下2023-08-08
安裝vue3開(kāi)發(fā)者工具但控制臺(tái)沒(méi)有顯示出vue選項(xiàng)的解決
這篇文章主要介紹了安裝vue3開(kāi)發(fā)者工具但控制臺(tái)沒(méi)有顯示出vue選項(xiàng)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue項(xiàng)目中路由跳轉(zhuǎn)頁(yè)面不變問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目中路由跳轉(zhuǎn)頁(yè)面不變問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue項(xiàng)目打包成exe可執(zhí)行文件的實(shí)現(xiàn)過(guò)程(無(wú)瑕疵,完美版)
突然接到公司需求,說(shuō)客戶想讓我們把項(xiàng)目直接打包,所以下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包成exe可執(zhí)行文件的實(shí)現(xiàn)過(guò)程,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
Vue3.5?發(fā)布已近半年,這篇文章主要來(lái)和大家技術(shù)一下它常用的新增和改動(dòng)特性,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-01-01
Vue開(kāi)發(fā)高德地圖應(yīng)用的最佳實(shí)踐
要在Web頁(yè)面中加入地圖，我推薦你使用高德地圖,下面這篇文章主要給大家介紹了關(guān)于Vue開(kāi)發(fā)高德地圖應(yīng)用的最佳實(shí)踐,需要的朋友可以參考下2021-07-07