<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ width: 300px; height: 300px; margin: 0 auto; background: skyblue; } </style> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <div class="div1" :style="{ background:color }" @click = 'changeColor($event,1)'> </div> <ul> <li v-for='(item,index) in list' @click='getIndex($event,index)' :data-index='index' >{{item}}</li> </ul> </div> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ color:'skyblue', list:[1,2,3,4] }, methods:{ changeColor:function(e,index){ console.log(e) console.log(index) this.color = 'pink' }, getIndex(e,index){ console.log(e) console.log(index) console.log(e.target.dataset.index)//这种事件传值的方式，可以适用任何地方 } } }) </script> </body> </html>