Vuejs学习笔记(一)-14.v-bind,v-for的集合使用-作业

需求：实现一个功能，点击的记录呈现一个颜色。

 

 代码如下：

<!--
@author:invoker
@project:project_lianxi
@file: 05-作业.html
@contact:invoker2021@126.com
@descript:
@Date:2021/7/1 15:04
@version: html5
-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>05-作业</title>
  <style>
      .active {
          color: red;
      }
  </style>
</head>
<body>
<div id="app">
  <h2>{{ message }}</h2>
  <ul>
    <li v-for="(item,index) in movies" @click="itemClick(index)" :class="getClasses(index)">{{item}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      movies: ['盗梦空间', '壮志凌云2', 'muse', '禁闭岛', '落叶归根', '疯狂赛车'],
      currentItemIdex: -1
    },
    methods: {
      itemClick(index) {
        this.currentItemIdex = index
      },
      getClasses(index) {
        return {
          active: this.currentItemIdex === index
        }
      }
    }
  })
</script>
</body>
</html>

 

posted @ 2021-07-01 15:22  kaer_invoker  阅读(50)  评论(0)    收藏  举报