模拟一下查询数据
<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>
