v-model控件

v-model用于和表单元素进行双向绑定, 它相当于 v-bind 和 v-on 的组合语法糖

如果同时有 v-model 和 v-bind 作用于同一个组件上, 那么仅 v-model 有效, v-model 有效的 html 组件为

• input
• select
• textarea
• components

实例如下

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<h2>v-model例子</h2>
<h2 align="center">v-model相当于v-bind与v-on两个指令的和</h2>
<div id="app">
	<h2>绑定input</h2>
	用户名:<input v-model="uname" />输入的是:{{uname}}
	<hr />
	<h2>绑定select</h2>
	<select v-model="hobby">
		<option value="HTML" >HTML</option>
		<option value="CSS" selected>CSS</option>
		<option value="JavaScript">JavaScript</option>
	</select>
	<span>你喜欢的是:{{hobby}}</span>
	<hr />
	<h2>绑定radio</h2>
	<label for="boy">男</label><input id="boy" type="radio" value="男" v-model="sex" />
	<label for="girl">女</label><input id="girl" type="radio" value="女" v-model="sex" />
	<span>你的性别是:{{sex}}</span>
</div>
<script>
	var example1 = new Vue({
	  el: '#app',
	  data: {
			uname:"",
			hobby:"JavaScript",
			sex:"男"
	  }
	});
</script>