vue-动态高亮效果

个人练习,仅供参考

实现如下效果:点击某块,某块变成其他颜色。

具体实现代码:

上边:

<template><div><h3 style="color: #f69">动态高亮效果</h3><hr>
<!-- 对象 --><div class="navarr"><divv-bind:class="{ active: current == n }"v-for="n in navarr":key="n"@click="current = n">{{ n }}</div></div>
<!-- 数组 --><div class="navarr1"><divv-bind:class="[current1==n1?'active':'']"v-for="n1 in navarr1":key="n1"@click="current1 = n1">{{ n1 }}</div></div><br><hr></div>
</template>
<script>
export default {data() {return {navarr: ["首页", "推荐", "分类", "我的"],current: "首页",navarr1: ["首页", "推荐", "分类", "我的"],current1: "首页",};},methods: {},created: {},
};
</script>
<style scoped>
.navarr ,.navarr1{display: flex;justify-content: space-around;margin-top: 8px;
}
.active {color: #f69;
}
</style>

下边:

<template><div id="app"><router-view /><footer class="footer"><router-link to="/"><img src="/favicon.ico" alt="" /><p :class="{ active: current == '/' }" @click="current = '/'">首页</p></router-link><router-link to="/sell"><img src="/favicon.ico" alt="" /><p :class="{ active: current == '/sell' }" @click="current = '/sell'"> v-if&v-model</p></router-link><router-link to="/key"><img src="/favicon.ico" alt="" /><p :class="{ active: current == '/key' }" @click="current = '/key'">Key</p></router-link><router-link to="/watch"><img src="/favicon.ico" alt="" /><p :class="{ active: current == '/watch' }" @click="current = '/watch'">Watch</p></router-link><router-link to="/cart"><img src="/favicon.ico" alt="" /><p :class="{ active: current == '/cart' }" @click="current = '/cart'">购物车</p></router-link><router-link to="/mine"><img src="/favicon.ico" alt="" /><p :class="{active:current=='/mine'}" @click="current='/mine'">我的</p></router-link></footer></div>
</template>
<script>
export default {data() {return {current: "/",};},methods: {},created: {},
};
</script>
<style scoped>
.footer {position: fixed;left: 0;bottom: 0;width: 100%;height: 100px;display: flex;flex-wrap: wrap;justify-content: space-around;background: rgb(243, 207, 207);
}
.footer a {color: gray;font-size: 14px;font-weight: 600;display: flex;flex-direction: column;align-items: center;justify-content: center;
}
.footer a img {width: 20px;height: 20px;
}
.active {color: #f69;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/597565.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SwiftUI之深入解析如何使用新地图框架MapKit

一、前言 一旦将 App 目标更新到 iOS 17&#xff0c;Xcode 会将任何使用旧的 Map 初始化器的用法标记为已弃用&#xff1a; 会有警告提示&#xff1a;init coordinate region 已在 iOS 17 中弃用。请改用带有 MapContentBuilder 参数的地图初始化器。在 iOS 17 中&#xff0c;…

Java-replaceAll()同时替换多个字符

今天复现了raplaceAll&#xff08;&#xff09;的用法&#xff0c;但是通常都是对一种字符进行替换&#xff0c;我就在想有没有操作可以一次性替换多个不同的字符&#xff0c;百度一搜&#xff0c;果然有。具体情况如下 首先是替换字的 String str1 "小明&#xff0c;小…

案例091:基于微信小程序的农场驿站平台的设计与实现

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

Redis (三)

1、redis复制 简单的概括就是主从复制&#xff0c;master以写为主&#xff0c;Slave以读为主&#xff0c;当master数据发生变化的时候&#xff0c;自动将更新的数据异步同步到其他的slave是数据库。 使用这种机制的话&#xff0c;可以做到读写分离&#xff0c;可以减轻主机负担…

14.两数之和

题目 class Solution {public int[] twoSum(int[] nums, int target) {int[] ret {-1,-1};for(int i0;i<nums.length;i) {for(int ji1;j<nums.length;j) {if(nums[i] nums[j] target) {ret[0] i;ret[1] j;}}}return ret;} }

uniapp 无限级树形结构面包屑、单选-多选、搜索、移除功能插件,基于【虚拟列表】高性能渲染海量数据,加入动态高度、缓冲区

hyq-tree-vtw 无限级树形结构面包屑、单选-多选、搜索、移除功能 示例项目 单选-user 单选-任意一项 多选-关联下级 多选-任意一项 已选择数据弹框 说明 本插件需要使用uni-popup、uni-transition用于已选择数据弹框&#xff0c;因此需要有这些依赖,请自行导入本插件基于【虚…

企业培训系统开发:构建灵活高效的学习平台

企业培训系统的开发在当今数字化时代是至关重要的。本文将介绍一些关键技术和代码示例&#xff0c;以帮助您构建一个灵活、高效的企业培训系统。 1. 技术选型 在开始企业培训系统的开发之前&#xff0c;首先需要选择合适的技术栈。以下是一个基本的技术选型示例&#xff1a;…

Python(wordcloud):根据文本数据(.txt文件)绘制词云图

一、前言 本文将介绍如何利用python来根据文本数据&#xff08;.txt文件&#xff09;绘制词云图&#xff0c;除了绘制常规形状的词云图&#xff08;比如长方形&#xff09;&#xff0c;还可以指定词云图的形状。 二、相关库的介绍 1、安装相关的库 pip install jieba pip i…

HTTP和TCP代理原理及实现,主要是理解

Web 代理是一种存在于网络中间的实体&#xff0c;提供各式各样的功能。现代网络系统中&#xff0c;Web 代理无处不在。我之前有关 HTTP 的博文中&#xff0c;多次提到了代理对 HTTP 请求及响应的影响。今天这篇文章&#xff0c;我打算谈谈 HTTP 代理本身的一些原理&#xff0c;…

C++完成Query执行sql语句的接口封装和测试

1、在LXMysql.h 创建Query执行函数 //封装 执行sql语句 if sqllen 0 strlen获取字符长度bool Query(const char*sql,unsigned long sqllen0); 2、在LXMysql.cpp编写函数 bool LXMysql::Query(const char* sql, unsigned long sqllen){if (!mysql)//如果mysql没有初始化好{c…

使用qtquick调用python程序

一. 内容简介 使用qtquick调用python程序 二. 软件环境 2.1vsCode 2.2Anaconda version: conda 22.9.0 2.3pytorch 安装pytorch(http://t.csdnimg.cn/GVP23) 2.4QT 5.14.1 新版QT6.4,&#xff0c;6.5在线安装经常失败&#xff0c;而5.9版本又无法编译64位程序&#xf…

UE4 4.21使用编辑器蓝图EditorBlueprint方法

在UE4 4.21中&#xff0c;编辑器蓝图&#xff08;Editor Blueprint&#xff09;是一个强大的工具&#xff0c;允许开发者扩展和自定义Unreal编辑器的功能。通过编辑器蓝图&#xff0c;我们可以创建自定义的工具和功能&#xff0c;以优化开发流程。 本教程将指导您如何在UE4 4.…

【LeetCode-剑指offer】--19.验证回文串II

19.验证回文串II 方法&#xff1a;双指针 首先考虑如果不允许删除字符&#xff0c;如何判断一个字符串是否是回文串。常见的做法是使用双指针。定义左右指针&#xff0c;初始时分别指向字符串的第一个字符和最后一个字符&#xff0c;每次判断左右指针指向的字符是否相同&#…

技术学习|CDA level I 多维数据透视分析

对基于多源表的结构数据进行商业智能分析&#xff0c;可以帮助决策者从多个不同业务角度对业务行为结果进行观测&#xff0c;进而帮助决策者全面、精确地定位业务问题&#xff0c;实现商业洞察的相关内容。通过商业智能分析产出的分析成果被统称为商业智能报表&#xff0c;简称…

ubuntu创建pytorch-gpu的docker环境

文章目录 安装docker创建镜像创建容器 合作推广&#xff0c;分享一个人工智能学习网站。计划系统性学习的同学可以了解下&#xff0c;点击助力博主脱贫( •̀ ω •́ )✧ 使用docker的好处就是可以将你的环境和别人的分开&#xff0c;特别是共用的情况下。本文介绍了ubuntu环境…

4.快速实现增删改查,模糊查询功能

打开springboot项目&#xff0c;在com.example下建包common,在common下新建Result.java 4.1封装统一的返回数据结构 1.在Result.java中编写如下代码&#xff1a; private static final String *SUCCESS*"0"; private static final String *ERROR*"-1"; p…

智能穿戴时代 | 米客方德SD NAND的崭新优势

SD NAND在智能穿戴上的优势 SD NAND是一种可以直接焊接在智能穿戴设备主板上的存储芯片&#xff0c;其小型化设计有助于紧凑设备尺寸&#xff0c;同时提供可靠的嵌入式存储解决方案。 这种集成设计减少了空间占用&#xff0c;同时确保设备在高度活动的环境中更为稳定。SD NAND…

[足式机器人]Part2 Dr. CAN学习笔记-动态系统建模与分析 Ch02-3流体系统建模

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记-动态系统建模与分析 Ch02-12课程介绍电路系统建模、基尔霍夫定律 流量 flow rate q q q m 3 / s m^3/s m3/s 体积 volume V V V m 3 m^3 m3 高度 heigh h h h m m m 压强 pressure p p p …

Jvm垃圾收集器系列之Parallel Scavenge收集器(个人见解仅供参考)

问&#xff1a;什么是Parallel Scavenge&#xff1f; 答&#xff1a;Parallel Scavenge是Java HotSpot虚拟机中的一种垃圾收集器&#xff0c;它主要用于提高应用程序的吞吐量。 问&#xff1a;Parallel Scavenge的主要目标是什么&#xff1f; 答&#xff1a;Parallel Scavenge的…