Vue表單綁定的實(shí)例代碼（單選按鈕,選擇框（單選時(shí),多選時(shí),用 v-for 渲染的動(dòng)態(tài)選項(xiàng)）
更新時(shí)間：2019年05月13日 09:05:39 作者：又又IT
本文通過(guò)實(shí)例代碼給大家介紹了Vue表單綁定（單選按鈕，選擇框（單選時(shí)，多選時(shí),用 v-for 渲染的動(dòng)態(tài)選項(xiàng)）的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue表單綁定（單選按鈕，選擇框（單選時(shí)，多選時(shí)）</title>
</head>
<body>
<!-- 單選按鈕 -->
<div id="app">
<input type="radio" value="選擇1" v-model="radio"/>
<label>選擇1</label>
<input type="radio" value="選擇2" v-model="radio"/>
<label>選擇2</label>
<p>所選擇：{{radio}}</p>
</div>
<!-- 選擇框（單選時(shí)） -->
<div id="app1">
<select v-model="select">
<option disabled value="">請(qǐng)選擇</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>所選擇：{{select}}</p>
</div>
<!-- 用 v-for 渲染的動(dòng)態(tài)選項(xiàng) -->
<div id="app2">
<select v-model="select">
<option v-for="item in list" v-bind:value="item.id">{{item.name}}</option>
</select>
<p>所選擇：{{select}}</p>
</div>
<script src="vue.js"></script>
<script>
//單選按鈕
var app=new Vue({
el:"#app",
data:{
radio:"選擇1"
}
});
//選擇框(單選時(shí))
var app=new Vue({
el:"#app1",
data:{
select:""
}
});
//用 v-for 渲染的動(dòng)態(tài)選項(xiàng)
var app2 = new Vue({
el: "#app2",
data: {
select: '1',
list: [{
id: 1,
name: 'A'
},
{
id: 2,
name: 'B'
},
{
id: 3,
name: 'C'
}
],
}
})
</script>
</body>
</html>
選擇框（多選時(shí)）：只需要把select:[] 即可,并且添加multiple；
總結(jié)
以上所述是小編給大家介紹的Vue表單綁定的實(shí)例代碼（單選按鈕,選擇框（單選時(shí),多選時(shí),用 v-for 渲染的動(dòng)態(tài)選項(xiàng)）,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
vue?LogicFlow更多配置選項(xiàng)示例詳解
這篇文章主要為大家介紹了vue?LogicFlow更多配置選項(xiàng)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
今天小編就為大家分享一篇淺談VUE-CLI腳手架熱更新太慢的原因和解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue項(xiàng)目中如何將數(shù)據(jù)導(dǎo)出為word文檔
這篇文章主要介紹了vue項(xiàng)目中如何將數(shù)據(jù)導(dǎo)出為word文檔問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
vue關(guān)于select組件綁定的值為數(shù)字類(lèi)型的問(wèn)題
這篇文章主要介紹了vue關(guān)于select組件綁定的值為數(shù)字類(lèi)型的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
詳解vue中父子組件傳遞參數(shù)props的實(shí)現(xiàn)方式
這篇文章主要給大家介紹了在vue中，父子組件傳遞參數(shù)?props?實(shí)現(xiàn)方式，文章通過(guò)代碼示例介紹的非常詳細(xì)，對(duì)我們的學(xué)習(xí)或工作有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07
vue 解決uglifyjs-webpack-plugin打包出現(xiàn)報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了vue 解決uglifyjs-webpack-plugin打包出現(xiàn)報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要給大家介紹了關(guān)于如何啟動(dòng)node.js文件的3個(gè)方法,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07
vue.js動(dòng)態(tài)數(shù)據(jù)綁定學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了vue.js動(dòng)態(tài)數(shù)據(jù)綁定學(xué)習(xí)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了Vue混入與插件的使用，mixins（混入），官方的描述是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式，mixins是一個(gè)js對(duì)象，它可以包含我們組件中script項(xiàng)中的任意功能選項(xiàng)，如data、components、methods 、created、computed等等2022-09-09
Vue3?實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能(刷新保持狀態(tài))
倒計(jì)時(shí)的運(yùn)用場(chǎng)景是需要經(jīng)常用到的，但是根據(jù)業(yè)務(wù)的不同，好比手機(jī)驗(yàn)證碼或者是郵箱驗(yàn)證碼之類(lèi)的，即使用戶(hù)跳轉(zhuǎn)到其它頁(yè)面或者刷新，再次回到登錄也，驗(yàn)證碼的倒計(jì)時(shí)也得保持狀態(tài),下面通過(guò)本文給大家分享Vue3?驗(yàn)證碼倒計(jì)時(shí)功能實(shí)現(xiàn)，感興趣的朋友一起看看吧2022-08-08