当前位置：网站首页>V-for loop traversal

V-for loop traversal

2022-06-11 18:26:00 【Hello, teacher I'm Dabai】

v-for Loop traversal

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style> .active{
       color: red; } </style>
</head>
<body>
<div id="app">
  <h2> World wide cat animation </h2>
    <ul>
      <li v-for="(item, index) in movies" :class="{active: currentIndex === index}" @click="liClick(index)">
        {
   {item}}
      </li>
    </ul>
</div>
<!-- from CDN introduce vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script> const app = new Vue({
       // Initialize a VUE example  el: '#app', //  For page rendering VUE Element of instance  data: {
       //  Defining data  movies: [' One man fixes the immortals ', ' Break the vault of heaven ', ' The moon in Qin Dynasty ', ' The heart of the sword ', ' Young song line '], currentIndex: 0 }, methods: {
       liClick(index) {
       this.currentIndex = index } } }) </script>

</body>
</html>