v-model的各种表单元素绑定：
1.单选
2.勾选后按钮Next可点
3.多选绑定数组
4.select 数据绑定
5.Lazy加载
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>v-model的各种表单元素绑定：</h1>
<div id="app">
<label for="male">
<h2>单选：</h2>
<input type="radio" id="male" value="男" v-model="gender" />男
</label>
<label for="female">
<input type="radio" id="female" value="女" v-model="gender" />女
</label>
<br>您选择的是：{{gender}}
<hr>
<label>
<h2>勾选后按钮Next可点：</h2>
<input type="checkbox" id="agree" v-model="agree" />同意协议
</label>
<button v-bind:disabled="!agree">Next</button>
<br>{{agree}}
<hr>
<label>
<h2>多选绑定数组：</h2>
<label><input type="checkbox" v-model="fav" value="足球" />足球</label>
<label><input type="checkbox" v-model="fav" value="篮球" />篮球</label>
<label><input type="checkbox" v-model="fav" value="羽毛球" />羽毛球</label>
<label><input type="checkbox" v-model="fav" value="乒乓球" />乒乓球</label>
<br>爱好：{{fav}}
<hr>
<label>
<h2>select：</h2>
<select name="shuiguo" v-model="shuiguo" style="width: 100px;height: 30px;">
<!-- multiple="multiple" -->
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<br>选择的水果：{{shuiguo}}
</label>
<hr>
<label>Lazy加载：<br>
<input type="text" v-model.lazy="message" /><br>
Message：{{message}}
</label>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
message: 'Hello ..',
gender: '女',
agree: false,
fav: [],
shuiguo: '',
sports: ['篮球', '足球', '羽毛球', '台球', '乒乓球'],
},
methods: {
}
})
</script>
<!-- v-mode绑定的表单必须有value -->
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
