Vue表單綁定的實例代碼（單選按鈕,選擇框（單選時,多選時,用 v-for 渲染的動態(tài)選項）
更新時間：2019年05月13日 09:05:39 作者：又又IT
本文通過實例代碼給大家介紹了Vue表單綁定（單選按鈕，選擇框（單選時，多選時,用 v-for 渲染的動態(tài)選項）的相關(guān)知識，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue表單綁定（單選按鈕，選擇框（單選時，多選時）</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>
<!-- 選擇框（單選時） -->
<div id="app1">
<select v-model="select">
<option disabled value="">請選擇</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>所選擇：{{select}}</p>
</div>
<!-- 用 v-for 渲染的動態(tài)選項 -->
<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"
}
});
//選擇框(單選時)
var app=new Vue({
el:"#app1",
data:{
select:""
}
});
//用 v-for 渲染的動態(tài)選項
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>
選擇框（多選時）：只需要把select:[] 即可,并且添加multiple；
總結(jié)
以上所述是小編給大家介紹的Vue表單綁定的實例代碼（單選按鈕,選擇框（單選時,多選時,用 v-for 渲染的動態(tài)選項）,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
本節(jié)，我們將討論關(guān)于AST的轉(zhuǎn)換。所謂AST的轉(zhuǎn)換，指的是對AST進(jìn)行一系列操作，將其轉(zhuǎn)換為新的AST的過程。新的AST可以是原語言或原DSL的描述，也可以是其他語言或其他DSL的描述。例如，我們可以對模板AST進(jìn)行操作，將其轉(zhuǎn)換為JavaScriptAST2023-01-01
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲 key/value 對的數(shù)據(jù),localStorage 用于長久保存整個網(wǎng)站的數(shù)據(jù),保存的數(shù)據(jù)沒有過期時間,直到手動去刪除,本文給大家介紹Vue3封裝localStorage-基本使用,感興趣的朋友一起看看吧2023-12-12
vue啟動后請求后端接口報ERR_EMPTY_RESPONSE錯誤的解決
這篇文章主要介紹了vue啟動后請求后端接口報ERR_EMPTY_RESPONSE錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了bing Map 在vue項目中的使用,需要的朋友可以參考下2018-04-04
Vue 使用高德地圖添加點標(biāo)記 + 點擊地圖獲取坐標(biāo) + 帶搜索(即地
這篇文章主要介紹了Vue 使用高德地圖添加點標(biāo)記 + 點擊地圖獲取坐標(biāo) + 帶搜索(即地理編碼 + 逆地理編碼) 附完整示例,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-01-01
vue3在單個組件中實現(xiàn)類似mixin的事件調(diào)用
這篇文章主要為大家詳細(xì)介紹了vue3如何在單個組件中實現(xiàn)類似mixin的事件調(diào)用,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
這篇文章主要介紹了Vue3中的setup執(zhí)行時機與注意點說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了使用vue實現(xiàn)HTML頁面生成圖片的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
vue el-table字段點擊出現(xiàn)el-input輸入框,失焦保存方式
這篇文章主要介紹了vue el-table字段點擊出現(xiàn)el-input輸入框,失焦保存方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
Vue項目中v-bind動態(tài)綁定src路徑不成功問題及解決
這篇文章主要介紹了Vue項目中v-bind動態(tài)綁定src路徑不成功問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04