求助各位大佬能用v-on监听事件直接改变其样式属性么

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>遍历循环</title>
  <style>
    .active{
      color: red;
    }
  </style>
</head>
<body>
   <div id="app">
     <ul>
       <li v-for="(items,index) in moviesName"
           :class="{active:changeStyle===index}"
           @click="clkMovies(index)">
           {{index}}.{{items}}
       </li>
     </ul>
   </div>
   <script src="../vue.js"></script>
   <script>
     const app=new  Vue({
       el:'#app',
       data:{
         moviesName:["加勒比海盗","海王","钢铁侠","美国队长"],
         changeStyle:''
       },
       methods:{
         clkMovies(index){
            this.changeStyle=index
         }
       }
     })
   </script>
</body>
</html>

求助各位大佬,能用Vue中其他方法实现这个效果么

你这个例子不就是用vue实现的??