v-bind/v-on/v-for结合练习

最新推荐文章于 2022-05-19 20:31:19 发布

407指导员

最新推荐文章于 2022-05-19 20:31:19 发布

阅读量182

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/110930507

版权

vue 专栏收录该内容

64 篇文章 0 订阅

订阅专栏

v-bind/v-on/v-for结合练习

鼠标点哪个电影其变为红色，默认第一个红色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>作业</title>
  <style>
    .Red {
      color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <ul>
<!-- 在v-bind:class中，true/false判断通过，当前点击的li的index和标志currentIndex是否一样来决定，默认情况下第一个亮-->
    <li v-for="(m,index) in movies" v-on:click="ulClick(index)" v-bind:class="{Red:index===currentIndex}">{{index}}-{{m}}</li>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      movies: ['海贼王','海尔兄弟','火影忍者','进击的巨人'],
      //当前点的li,默认是第一个
      currentIndex:0,
    },
    methods:{
      ulClick:function (index) {
        //点哪个将当前的的下标赋值给currentIndex
        this.currentIndex = index;
      }
    }
  });
</script>
</body>
</html>

在这里插入图片描述

注意点

1.v-for=(item, index) in items不仅拿到了需要遍历的元素，其下标的索引也得到了。

2.ulClick函数传入这个index作为参数，设置一个标志currentIndex用来显示第几个li需要变色。默认情况是第一个为红色。

3.每次点击，将标志修改为下标，然后class属性里的布尔值，就可以通过index===currentIndex来判断，点哪一个其li中的class就添加Red样式。

407指导员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-bind/v-on/v-for结合练习

v-bind/v-on/v-for结合练习鼠标点哪个电影其变为红色，默认第一个红色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>作业</title> <style> .Red { color: red; } </style></head><body&g
复制链接

扫一扫

专栏目录