觸發事件的兩種基本寫法

模擬一下查詢資料

<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>