触发事件的两种基本写法
模拟一下查询数据
<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>