Vue学习——实现点击列表改变颜色

最新推荐文章于 2024-06-30 11:06:07 发布

aiolos42382

最新推荐文章于 2024-06-30 11:06:07 发布

阅读量4.2k

点赞数 3

分类专栏： Vue学习文章标签： vue html vue.js

本文链接：https://blog.csdn.net/weixin_47633384/article/details/113753745

版权

Vue学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用Vue实现点击列表项改变颜色的效果，通过设置激活状态并动态绑定class实现。文章还探讨了代码中关于`isActive`赋值的注意事项，以及如何改进代码以避免意外行为。同时，提供了完整的HTML和JavaScript代码示例，并展示了最终效果。

摘要由CSDN通过智能技术生成

需求

简单实现点击列表其中一项，改变其颜色

代码

解决思路

首先设定想要改变的颜色

 <style>
      .active{
          color: red;
      }
 </style>

使用 v-for 实现列表展示，v-bind 动态绑定 class，v-on:click 实现点击事件。

设置一个 index 来监听下标，当 index 的值和 isActive 的值相等时，点击 items 事件，执行 indexClick(index) 函数。

<div id="app">
    <ul>
        <li v-for="(items,index) in movies" @click="indexClick(index)" :class="{active:index==isActive}">{{index}}--{{items}}</li>
    </ul>
</div>

初始化及定义数组

   const app = new Vue({
        el: '#app',
        data: {
            movies: ['星球大战','火影忍者','美女与野兽'],
            isActive: 0,
        },

定义函数

  methods: {
            indexClick: function(index){
                this.isActive = index
            }
        }

完整代码

<!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="(items,index) in movies" @click="indexClick(index)" :class="{active:index==isActive}">{{index}}--{{items}}</li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            movies: ['星球大战','火影忍者','美女与野兽'],
            isActive: 0,
        },
        methods: {
            indexClick: function(index){
                this.isActive = index
            }
        }
    })
</script>

</body>
</html>

成果图

在这里插入图片描述

注意事项

1. 方法中 this.isActive 的赋值

 data: {
            movies: ['星球大战','火影忍者','美女与野兽'],
            isActive: true,
        },
 methods: {
            indexClick: function(index){
            	this.isActive = !this.isActive
        	}
       }

如果将 isActive 的值设定为 true，indexClick 中设定 this.isActive = !this.isActive，那么结果是只能点击 index 为1和0的项，而点击 index 为2的项时，又跳回了index为0的项。

2. isActive 值的设定有点讲究

如果将值设定为 ture，那么红色一开始就在 index 为1的那一项上，想要红色在第一项上，就要设定 isActive 的初始值为0。

值设为true的时候：
在值设为true的时候
值设为0的时候：
在这里插入图片描述

3.可改进的地方

这一块改为===（严格相等）

//1.== 用于比较、判断两者相等，比较时可自动换数据类型-->
//2.=== 用于（严格）比较、判断两者（严格）相等，不会进行自动转换，要求进行比较的操作数必须类型一致，不一致时返回flase。-->
<li v-for="(items,index) in movies" @click="indexClick(index)" :class="{active:index===isActive}">{{index}}--{{items}}</li>

aiolos42382

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Vue学习——实现点击列表改变颜色

Vue实现点击列表改变其中一项的颜色需求代码解决思路完整代码成果图注意事项1. 方法中 this.isActive 的赋值2. isActive 值的设定有点讲究需求简单实现点击列表其中一项，改变其颜色代码解决思路首先设定想要改变的颜色 <style> .active{ color: red; } </style>使用 v-for 实现列表展示，v-bind 动态绑定 class，v-on:click 实现点击事件。设置
复制链接

扫一扫