点击导航切换字体样式和图标样式

差点兔了
360 阅读1分钟

如图要实现点击导航栏字体和图片同时切换

image.png

  1. 第一种实现方式 我使用了v-if命令，将会用到的DOM都写出来，根据条件判断使用哪个

image.png

image.png

image.png

  1. 第二种实现方式

我使用的动态绑定样式和图片的指令，结合三元运算符判断绑定哪个样式

image.png 注意此处引入图片要使用require，静态资源都要用require引入

image.png

注意：因为有多个按钮，所以还需要实现互斥的效果，不能多个按钮同时蓝色

image.png

  1. 如果是用v-for遍历接口数据，拥有index的话可以简化成以下写法：

image.png

image.png

  • 找两个菜单导航插件样式找泪目了

image.png

image.png

avatar
文章
阅读
粉丝