vue v-model指令学习例子整理记录自学前端

最新推荐文章于 2024-04-29 03:47:08 发布

原创最新推荐文章于 2024-04-29 03:47:08 发布 · 1.6w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

26 篇文章

订阅专栏

本文通过一个具体的Vue实例，详细展示了v-model指令在表单元素中的应用，包括文本输入框、单选按钮、复选框及下拉选择框的数据绑定技巧。

vue v-model指令学习例子整理记录自学前端

<div id="app">
	<form>
		username:
		<input type="text" v-model="data.name" placeholder="input username"></input><br/>
		sex:
		<input type="radio" id="boy" value="one" v-model="data.sex"></input>
		<label for="boy">boy</label>
		<input type="radio" id="girl" value="two" v-model="data.sex"></input>
		<label for="girl">girl</label>
		<br/>
		interest:
		<input type="checkbox" id="book" value="book" v-model="data.interest"></input>
		<label for="book">read</label>
		<input type="checkbox" id="swim" value="swim" v-model="data.interest"></input>
		<label for="swim">swimming</label>
		<input type="checkbox" id="song" value="song" v-model="data.interest"></input>
		<label for="song">singing</label>
		<br/>
		identity:
		<select v-model="data.identity">
			<option value="teacher" selected>teacher</option>
			<option value="doctor">doctor</option>
			<option value="lawyer">lawyer</option>
		</select>
		<br/>
	</form>
</div>

<script src="vue.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			data: {
				name: '艳艳',
				sex: 'two',
				interest: ['book', 'swim'],
				identity: 'doctor'
			}
		}
	})
</script>