Vue事件处理

1. 单选框处理

要点：属性值（ID、value、v-model、type=“radio”）

<input type="radio" v-model="picked" id="man" value="man_value"/>
			<lable for="man">男</lable>
			<br />
<input type="radio" v-model="picked" id="woman" value="woman_value"/>
			<lable for="woman">女</lable>
			<p>所选的性别为:{{picked}}</p>
<script>
			var vm = new Vue({
				el:'#app',
				data:{
					picked:''
				}
			});
</script>			

2. 复选框

复选框主要是把 picked 设置为一个数组。

3. 选择框

普通选择框

<select v-model="selected">
	<option value="1">选项一</option>
	<option value="2">选项二</option>
	<option value="3">选项三</option>
</select>

多项选择框
主要是 multiple ,然后设置数据的动态绑定为数组。

<select v-model="selected" multiple>
	<option value="1">选项一</option>
	<option value="2">选项二</option>
	<option value="3">选项三</option>
</select>

4. 防止冒泡产生

假如一个div中有一个按钮，在点击事件中，如果按钮被点击之后，就会出现div和按钮都被点击的事件。为了防止此种事件的发生。

<div id="app">
			<div @click="fn1" style="width: 200px ;height: 300px; border:2px solid pink ;">
				<button @click.stop="fn2">点击</button>
			</div>
		</div>
		<script src="../lib/vue.js"></script>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
			
				},
				methods:{
					fn1(){
						console.log("div被点击");
					},
					fn2(){
						console.log("button被点击");
					}
				}
			});
		</script>

5.键盘输入

<div id="app">
<input type="text" @keyup="fn"></input>
</div>
<script>
	new Vue({
	el:'',
	data:{},
	methods:{
	fn(){}
	}
</script>