Vue和JavaScript实现：多个li中点击不同li，颜色实时动态改变

杜兰很特别+

已于 2022-04-20 10:20:04 修改

阅读量1.2k

点赞数

分类专栏： Vue 文章标签： javascript vue.js html 前端框架

于 2022-04-12 10:20:08 首次发布

本文链接：https://blog.csdn.net/weixin_46870466/article/details/124117411

版权

本文介绍了如何利用Vue和JavaScript实现在网页导航栏中点击某个选项时，选中项颜色变为红色，其余项保持黑色的效果。通过这个实例，读者可以了解前端动态效果的实现方法。

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

开发目的：生活中我们常见到：点击网页导航栏中的哪一个选项时，其标题颜色就会变为红色，而其它未被点击的则保持黑色。那么今天我们就接著Vue和JavaScript来实现这一逻辑场景。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    
    <style>
      .active {
   
        color: red;
      }
    </style>