<!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>