vue导航点击切换图片

最新推荐文章于 2024-08-19 09:00:00 发布

就像风1样

最新推荐文章于 2024-08-19 09:00:00 发布

阅读量7.4k

点赞数

分类专栏： Vue vue专栏文章标签： vue 导航切换更换图片

本文链接：https://blog.csdn.net/qq_42221334/article/details/88130489

版权

这篇博客介绍了如何在Vue中实现导航点击时切换图片，无需使用for循环。通过添加不同的类名，并结合JavaScript控制图片显示与隐藏，达到切换效果。同时，文章提供了HTML、JS和CSS的主要代码段，并提到了原有代码的修改和功能实现。

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

导航切换后对应的彩色图片换成白色的图片；之前发过一篇用 for循环出来三个按钮的切换图片的方法。有兴趣的可以看下https://blog.csdn.net/qq_42221334/article/details/81630634，现在介绍的是未用for循环的方法，因之前别人写好的代码，功能没做出来我这里给修改下把功能实现了！

html

<template>
<div>
  <Header></Header>
  <Nav></Nav>
  <div class="main ">
    <ul class="list" @click="toRoute">
      <!--<li v-for="(item,index) in list"><span></span>{
  {item.name}}</li>-->
      <li class="lis" dir="/home/message">
        <img class="img1" src="../../static/img/home/xiaoxi_4.png" alt=""><img class="img2" src="../../static/img/home/xiaoxi_4_copy.png"/>&nbsp;&nbsp;消息中心
      </li>
      <li class="lis" dir="/home/fina