VUE中无序列表ul的li项，点击哪一项哪一项就变色，再次点击则颜色变回去

最新推荐文章于 2024-05-03 11:08:18 发布

西海燃风

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量1.1k

点赞数 1

分类专栏：前端文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/xihairanfeng/article/details/123482563

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <h1>{{message}}</h1>
    <ul>
      <li v-for="(item, index) in movies" v-on:click="changeRed(index)" v-bind:class="{active: isRedIndex === index}">{{item}}</li>
    </ul>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊',
          movies: ['海王', '星际穿越', '大话西游', '少年派', '盗梦空间'],
          isRedIndex: -1,
        },
        methods: {
          changeRed(index) {
            if(this.isRedIndex === index) {
              this.isRedIndex = -1;
            } else {
              this.isRedIndex = index;
            }
          }
        }
    })
  </script>
</body>
</html>

简单来讲就是找点击的序号isRededIndex和当前的序号index相等的时候

西海燃风

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE中无序列表ul的li项，点击哪一项哪一项就变色，再次点击则颜色变回去

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Title</title> <style> .active { color: red; } </style></head><body> <div id="app"> <h1.
复制链接

扫一扫