Vue学习(4)————————事件

触发事件的两种基本写法

模拟一下查询数据

<template>
  <div id="app">
		<button v-on:click="requestData()">请求数据</button>	
		<table border="1" cellspacing="" cellpadding="">
			<tr>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr v-for="item in list">
				<td>{{item.name}}</td>
				<td>{{item.age}}</td>
			</tr>
		</table>
	</div>
</template>

<script>
export default {
  name: 'app',
  data () {
  	return {
  		list:[]
  	}
  },methods:{
        requestData(){
  		//设置为空不然重复添加
  		this.list=[];
  		for(var i=0 ; i<10 ; i++){
  		 var people = new Object();
  		 people.name=i;
  		 people.age=i;
  		 this.list.push(people);
  		}
  	}
  }
}
</script>

方法传递参数

<template>
  <div id="app">
		<button v-on:click="requestData(number)">请求数据</button>	
		<table border="1" cellspacing="" cellpadding="">
			<tr>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr v-for="item in list">
				<td>{{item.name}}</td>
				<td>{{item.age}}</td>
			</tr>
		</table>
		{{number}}
	</div>
</template>

<script>
export default {
  name: 'app',
  data () {
  	return {
  		list:[],
  		number:100
  	}
  },methods:{

  	requestData(num){
  		//设置为空不然重复添加
  		this.list=[];
  		for(var i=0 ; i<num ; i++){
  		 
  		 var people = new Object();
  		 people.name=i;
  		 people.age=i;
  		 
  		 this.list.push(people);
  		}
  	}
  }
}

事件对象

可以获取鼠标的操作参数 

<template>
  <div id="app">
		<button v-on:click="getEvent($event)">事件对象</button>
	</div>
</template>

<script>
export default {
  name: 'app',
  data () {
  	return {
  	}
  },methods:{

		getEvent(e){
			console.log(e);
			//可以获取操作的元素并设置属性
			e.srcElement.style.background='red';
		}
  }
}
</script>

设置自定义元素并获取值

<template>
  <div id="app">
		<button data-solapara="sola最屌" v-on:click="getEvent($event)">事件对象</button>
	</div>
</template>

<script>
export default {
  name: 'app',
  data () {
  	return {
  	}
  },methods:{

		getEvent(e){
			console.log(e);
			//可以获取操作的元素并设置属性
			e.srcElement.style.background='red';
			
			var prm = e.srcElement.dataset.solapara;
			
			alert(prm);
		}
  }
}
</script>