<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <ul> <li v-for="(movie,index) in movies" @click="changeLiClass(index)" :class="{checked:index==nowIndex}" > {{index+movie}} </li> </ul> </div> </body> <script src="../vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ nowIndex:0, movies:[‘蓝猫与淘气‘,‘黑猫与白猫‘,‘进击的巨人‘,‘森林好小子‘] }, methods:{ changeLiClass(index){ this.nowIndex=index } } }) </script> <style type="text/css"> .checked {color:greenyellow} </style> </html>
Vue实例： 点击循环列表里的某行，改变该行的样式。默认第一行
原文：https://www.cnblogs.com/polax/p/15270450.html