Vue.js表單控件綁定示例盤(pán)點(diǎn)
更新時(shí)間：2023年07月21日 10:25:00 作者：小白兔zqd
這篇文章主要為大家介紹了一些Vue.js表單控件綁定示例盤(pán)點(diǎn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定
可以用 v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類(lèi)型自動(dòng)選取正確的方法來(lái)更新元素。盡管有些神奇，但 v-model 本質(zhì)上不過(guò)是語(yǔ)法糖，它負(fù)責(zé)監(jiān)聽(tīng)用戶(hù)的輸入事件以更新數(shù)據(jù)，并特別處理一些極端的例子。
1、單行文本
<body>
<div id="example">
<input type="text" v-model="message">
<p>Message is:{{message}}</p>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
message:""
}
});
</script>2、多行文本
<body>
<div id="example">
<span>Mulitline message is:</span>
<p style="white-space:pre">{{message}}</p>
<br>
<textarea v-model="message" placeholder="add mulitine lines..."></textarea>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
message:""
}
});
</script>3、復(fù)選框
<body>
<div id="example">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
checked:false
}
});
</script>4、復(fù)選框（升級(jí)版）
<body>
<div id="example">
<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="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names:{{checkedNames}}</span>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
checkedNames:[]
}
});
</script>5、單選按鈕
<body>
<div id="example">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked:{{picked}}</span>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
picked:""
}
});
</script>6、選擇列表
<body>
<div id="example">
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Sclected:{{selected}}</span>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
selected:""
}
});
</script>7、綁定value
復(fù)選框
<body>
<div id="example">
<input
type="checkbox"
v-model="toggle"
v-bind:true-value="a"
v-bind:false-value="b">
<p>{{toggle}}</p>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
a:'a',
b:'b' ,
toggle:"b"
}
});
</script>單選按鈕
<body>
<div id="example">
<input
type="radio"
v-model="picked"
v-bind:value="a">
<p>{{picked}}</p>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
a:'a',
picked:""
}
});
</script>以上就是Vue.js表單控件綁定示例盤(pán)點(diǎn)的詳細(xì)內(nèi)容，更多關(guān)于Vue表單控件綁定的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue.js每天必學(xué)之內(nèi)部響應(yīng)式原理探究
Vue.js每天必學(xué)之內(nèi)部響應(yīng)式原理探究，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
Vue中的element tabs點(diǎn)擊錨點(diǎn)定位,鼠標(biāo)滾動(dòng)定位
這篇文章主要介紹了Vue中的element tabs點(diǎn)擊錨點(diǎn)定位,鼠標(biāo)滾動(dòng)定位方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue 1.0 結(jié)合animate.css定義動(dòng)畫(huà)效果
本文分步驟給大家介紹了Vue 1.0自定義動(dòng)畫(huà)效果，vue1.0代碼結(jié)合animate.css定義動(dòng)畫(huà)，頁(yè)面一定要引入animate.cdd，具體實(shí)例代碼大家參考下本文
2018-07-07 
基于vue+electron實(shí)現(xiàn)文件下載打開(kāi)wps預(yù)覽
這篇文章主要給大家介紹了基于vue+electron實(shí)現(xiàn)文件下載打開(kāi)wps預(yù)覽,文中有詳細(xì)的代碼示例供大家借鑒參考,感興趣的同學(xué)可以參考閱讀下
2023-08-08 
vue+elementUI 實(shí)現(xiàn)內(nèi)容區(qū)域高度自適應(yīng)的示例
這篇文章主要介紹了vue+elementUI 實(shí)現(xiàn)內(nèi)容區(qū)域高度自適應(yīng)的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-09-09 
vue3中使用@vueuse/core中的圖片懶加載案例詳解
這篇文章主要介紹了vue3中使用@vueuse/core中的圖片懶加載案例,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-03-03 
vue實(shí)現(xiàn)橫向時(shí)間軸組件方式
這篇文章主要介紹了vue實(shí)現(xiàn)橫向時(shí)間軸組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12 
下面小編就為大家分享一篇Vue用v-for給src屬性賦值的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03 
這篇文章主要給大家介紹了關(guān)于如何用Vue3切換中英文顯示的相關(guān)資料,在Vue3中使用vue-i18n進(jìn)行國(guó)際化設(shè)置,包括安裝、配置、在組件中使用$t方法獲取翻譯字符串,以及可選的動(dòng)態(tài)加載語(yǔ)言包以提高性能,需要的朋友可以參考下
2024-11-11