Vue表单绑定的实例代码（单选按钮,选择框（单选时,多选时,用 v-for 渲染的动态选项）
时间：2020-10-07 14:29:07|栏目：vue|点击： 次
<!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+element ui框架里实现lodash的debounce防抖
栏 目：vue
下一篇：详解Vue iview IE浏览器不兼容报错（Iview Bable polyfill）
本文标题：Vue表单绑定的实例代码（单选按钮,选择框（单选时,多选时,用 v-for 渲染的动态选项）
本文地址：http://www.codeinn.net/misctech/8260.html
