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)文章
這篇文章主要介紹了一個Vue的內(nèi)存泄露詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-10-10
vue使用video.js實現(xiàn)播放m3u8格式的視頻
這篇文章主要為大家詳細介紹了vue如何使用video.js實現(xiàn)播放m3u8格式的視頻,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
組件(Component)是 Vue.js 最強大的功能之一。 組件可以擴展 HTML 元素,封裝可重用的代碼。下面這篇文章主要給大家介紹了關(guān)于Vue.js組件間循環(huán)引用的相關(guān)資料,文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下。2017-12-12
這篇文章主要介紹了簡單的vuex 的使用案例筆記,本文通過demo 是一個 改變 app 的模式 的一個appellation ，選擇是 夜間模式還是白天模式，具體代碼大家參考下本文2018-04-04
當(dāng)通過AJAX方式取回數(shù)據(jù)后，使用vue.js可以完美地按一定邏輯在頁面上的展示數(shù)據(jù)，代碼簡單、優(yōu)美、自然，而且便于與在用的頁面框架集成，本文給大家介紹Vue.js展示AJAX數(shù)據(jù)簡單示例2017-03-03
這篇文章主要介紹了vue-jsonp的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了淺談vue生命周期共有幾個階段？分別是什么？具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue后端傳文件流轉(zhuǎn)化成blob對象,前端點擊下載返回undefined問題
這篇文章主要介紹了vue后端傳文件流轉(zhuǎn)化成blob對象,前端點擊下載返回undefined問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家介紹了Storybook?7.0?Beta?Vue3踩坑解決記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
在 Vue 中,ref 是一個響應(yīng)式對象,修改 ref 的值會觸發(fā)組件的重新渲染,因為 Vue 的 ref 是基于其響應(yīng)式系統(tǒng)實現(xiàn)的,任何對 ref 的修改都會被 Vue 檢測到,并觸發(fā)組件的更新,本文給大家介紹Vue 和 React 使用ref的示例,感興趣的朋友一起看看吧2025-04-04