1、html中写法：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7.   </head>
  9.   <body>
  10.     <div id="app">
  11.       <ul>
  12.         <li v-for="item in students" @click="onLiClick(item)" :key="item.id">{{item.name}}</li>
  13.       </ul>
  14.     </div>
  16.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  17.     <script>
  18.       new Vue({
  19.         //指定作用于那一个div
  20.         el: '#app',
  21.         //属性
  22.         data: {
  23.           students: [
  24.             { id: 1, name: 'xiaoming', age: 18 },
  25.             { id: 2, name: 'xiaoli', age: 20 }
  26.           ]
  27.         },
  28.         methods: {
  29.           onLiClick(data) {
  30.             console.log(data.name);
  31.           }
  32.         }
  33.       });
  34.     </script>
  35.   </body>
  37. </html>

2、vue文件中写法

  1. <template>
  2.   <div class="hello">
  3.     <ul>
  4.       <li v-for="item in students" @click="onLiClick(item)" :key="item.id">{{ item.name }}</li>
  5.     </ul>
  6.   </div>
  7. </template>
  9. <script>
  10.   export default {
  11.     name: 'HelloWorld',
  12.     data() {
  13.       return {
  14.         students: [
  15.           { id: 1, name: 'xiaoming', age: 18 },
  16.           { id: 2, name: 'xiaoli', age: 20 }
  17.         ]
  18.       }
  19.     },
  20.     methods: {
  21.       onLiClick(data) {
  22.         console.log(data.name);
  23.       }
  24.     }
  25.   }
  26. </script>