Vue.js表單控件綁定示例盤(pán)點(diǎ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+electron實(shí)現(xiàn)文件下載打開(kāi)wps預(yù)覽
vue+elementUI 實(shí)現(xiàn)內(nèi)容區(qū)域高度自適應(yīng)的示例
vue3中使用@vueuse/core中的圖片懶加載案例詳解
vue實(shí)現(xiàn)橫向時(shí)間軸組件方式

