<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .active{ color:red; } </style> </head> <body> <!-- 需求：点击列表中的哪一项，该项为选中状态，选中状态为红色 --> <div id="app"> <ul> <li v-for="(v,k) in movies" @click="active(k)" :class="{active:index == k}" >{{k}}-{{v}}</li> </ul> </div> </body> </html> <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // v-bind的语法糖 :src const app = new Vue({ el:'#app',//决定vue挂载到哪个对象 data:{ movies:['大话西游','喜剧之王','喜剧之王','火影忍者','你的名字'], index:-1, }, methods:{ active:function(k){ this.index = k; } } }) </script>