小作业

Posted 2021-07-28 So istes immer

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小作业相关的知识，希望对你有一定的参考价值。

需求：点击列表的哪一项，哪一项就变为红色，一开始默认第一个为红色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="(m,index) in movies" :class="{active:index==currentIndex}" @click="getIndex(index)">{{m}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      movies:['西西里的美丽传说','低俗小说','心灵捕手','超脱'],
      currentIndex:'0',
    },
    methods: {
      getIndex: function (obj) {
        this.currentIndex = obj;
      },
    }
  })
</script>
</body>
</html>

在这里插入图片描述

以上是关于小作业的主要内容，如果未能解决你的问题，请参考以下文章

HTML5期末大作业：餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计咖啡网页设计美食餐饮网页设计...(代码片段

Android课程---Android Studio使用小技巧：提取方法代码片段