Vue表单绑定的实例代码（单选按钮,选择框（单选
编程学习 2021-07-04 15:50www.dzhlxh.cn编程入门
本文通过实例代码给大家介绍了Vue表单绑定（单选按钮，选择框（单选时，多选时,用 v-for 渲染的动态选项）的相关知识，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
<!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 渲染的动态选项）,希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！如果你觉得本文对你有帮助，欢迎网络推广网站推广转载，烦请注明出处，谢谢！