当前位置：网站首页>v-for循环遍历

v-for循环遍历

2022-06-11 18:03:00 【老师好我是大白】

v-for循环遍历

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style> .active{
       color: red; } </style>
</head>
<body>
<div id="app">
  <h2>万维猫动画</h2>
    <ul>
      <li v-for="(item, index) in movies" :class="{active: currentIndex === index}" @click="liClick(index)">
        {
   {item}}
      </li>
    </ul>
</div>
<!--从CDN引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script> const app = new Vue({
       //初始化一个VUE实例 el: '#app', // 用于页面渲染VUE实例的元素 data: {
       // 定义数据 movies: ['凡人修仙传', '斗破苍穹', '秦时明月', '山河剑心', '少年歌行'], currentIndex: 0 }, methods: {
       liClick(index) {
       this.currentIndex = index } } }) </script>

</body>
</html>