Vue表单绑定的实例代码（单选按钮,选择框（单选时,多选时,用 v-for 渲染的动态选项）
程序员文章站
2023-12-03 09:11:10
<!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 渲染的动态选项 -->
<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 渲染的动态选项
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；
总结
以上所述是小编给大家介绍的vue表单绑定的实例代码（单选按钮,选择框（单选时,多选时,用 v-for 渲染的动态选项）,希望对大家有所帮助