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.rhkb.cn/news/230633.html

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

相关文章

【DevOps-06】Jenkins实现CI/CD操作

一、简要说明 基于Jenkins拉取GitLab的SpringBoot代码进行构建发布到测试环境实现持续集成 基于Jenkins拉取GitLab指定发行版本的SpringBoot代码进行构建发布到生产环境实现CD实现持续部署 二、准备Springboot工程 1、IDEA新建工程 2、填写项目工程信息 3、选择Springboot版本…

数据库——LAMP的搭建及MySQL基操

1.实验内容及原理 1. 在 Windows 系统中安装 VMWare 虚拟机&#xff0c;在 VMWare 中安装 Ubuntu 系统,并在 Ubuntu 中搭建 LAMP 实验环境。 2. 使用 MySQL 进行一些基本操作&#xff1a; &#xff08;1&#xff09;登录 MySQL&#xff0c;在 MySQL 中创建用户&#xff0c;并对…

C++基础语法——基本知识、数据类型、运算符及程序流程结构

本专栏记录C学习过程包括C基础以及数据结构和算法&#xff0c;其中第一部分计划时间一个月&#xff0c;主要跟着黑马视频教程&#xff0c;学习路线如下&#xff0c;不定时更新&#xff0c;欢迎关注。 当前章节处于&#xff1a; >第1阶段-C基础入门 ---------第2阶段实战-通讯…

MySQL之表的记录操作

前言 存数据不是目的&#xff0c;目的是能够将存起来的数据取出来或者查出来&#xff0c;并且能够对数据进行增删改查操作&#xff0c;本文将详细介绍表中记录的增删改查操作。对记录的操作属于DML数据库操作语言&#xff0c;可以通过SQL实现对数据的操作&#xff0c;包括实现向…

HTML5和JS实现太阳、地球、月亮运行动画

HTML5和JS实现太阳、地球、月亮运行动画 一个简单的地球绕太阳旋转&#xff0c;月亮绕地球旋转的动画效果。注意&#xff0c;这是一个简化的模型&#xff0c;地球运行的圆形轨道的中心是太阳的圆心&#xff0c;月球运行的圆形轨道的圆心是地球的圆心。实际的我们知道天体运动要…

Vue 中的 ref 与 reactive:让你的应用更具响应性(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

Halcon粘连木材图像的目标分割计数

Halcon粘连木材图像的目标分割计数 文章目录 Halcon粘连木材图像的目标分割计数1. 提取面积较小区域2. 分割较大区域3. 区域合并与计数 本文以一个实际场景图片为例&#xff0c;介绍阈值处理与形态学计算的应用。案例图像如图所示,图&#xff08;a&#xff09;为输入的原始图像…

第十三章 需求工程之对数据关系进行建模

对数据关系进行建模 在设计阶段创建ERD时&#xff0c;其实也是在定义系统数据库的逻辑结构或物理&#xff08;实现&#xff09;结构。从分析阶段开始完成的视图能够扩展或者完善对系统的理解和优化系统实现。 ERD 实体 实体本来可以代表物理上的实体&#xff08;包括人&…

深度学习核心技术与实践之计算机视觉篇

非书中全部内容&#xff0c;只是写了些自认为有收获的部分 计算机视觉背景 &#xff08;1&#xff09;视觉皮层的神经元是一列一列组织起来的&#xff0c;每一列神经元只喜欢某一种特定的形状或者某些简单的线条组合&#xff0c;而不是鱼、老鼠、鲜花 &#xff08;2&#xf…

ubuntu18.04查询实时内存、CPU占用率命令

gnome-system-monitor效果就是下面这样&#xff1a;

【KingbaseES】实现MySql函数Space

CREATE OR REPLACE FUNCTION SPACE(input_length integer) RETURNS text AS $$ BEGIN RETURN REPEAT( , input_length) AS SPACES; END; $$ LANGUAGE plpgsql;

虚幻UE 增强输入-第三人称模板增强输入分析与扩展

本篇是增强输入模块&#xff0c;作为UE5.0新增加的模块。 其展现出来的功能异常地强大&#xff01; 让我们先来学习学习一下第三人称模板里面的增强输入吧&#xff01; 文章目录 前言一、增强输入四大概念二、使用步骤1、打开增强输入模块2、添加IA输入动作2、添加IMC输入映射内…

SpringCloud微服务 【实用篇】| Dockerfile自定义镜像、DockerCompose

目录 一&#xff1a;Dockerfile自定义镜像 1. 镜像结构 2. Dockerfile语法 3. 构建Java项目 二&#xff1a; Docker-Compose 1. 初识DockerCompose 2. 部署微服务集群 前些天突然发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;…

基于Vue的宿舍管理系统

基于Vue的宿舍管理系统资源-CSDN文库 基于 Koa 以及 VueJS 的宿舍管理系统。 新增功能&#xff1a; 【楼层管理】添加『入住人员信息』模块&#xff0c;显示入住学生、性别、院系、专业的人数&#xff0c;可用饼图表示【用户信息】学生用户添加性别、院系、专业字段【楼层管理…

Alice Bob推出16量子比特量子处理单元——“Helium 1”

​&#xff08;图片来源&#xff1a;网络&#xff09; 容错量子计算机硬件开发商Alice & Bob宣布已成功流片一款新芯片“Helium 1”&#xff0c;希望能借助该芯片降低随着量子比特数增加而提高的错误率&#xff0c;这是该公司第一个纠错逻辑量子比特&#xff08;纠错量子计…

YOLOv8改进 更换轻量化模型MobileNetV3

一、MobileNetV3论文 论文地址&#xff1a;1905.02244.pdf (arxiv.org) 二、 MobileNetV3网络结构 MobileNetV3引入了一种新的操作单元&#xff0c;称为"Mobile Inverted Residual Bottleneck"&#xff0c;它由一个1x1卷积层和一个3x3深度可分离卷积层组成。这个操…

go语言语法基础

文章目录 前言一、输入和输出常用的字符串格式化符号 二、注释三、Go常用基本语言数据类型数字类型布尔类型字符类型变量与常量数组和切片数组切片 map类型创建map增删改查特别提醒 指针 四、运算符五、条件判断语句if系列switch六、循环语句for循环标准写法死循环while循环do …

【三维分割】SAGA:Segment Any 3D Gaussians

系列文章目录 代码&#xff1a;https://jumpat.github.io/SAGA. 论文&#xff1a;https://jumpat.github.io/SAGA/SAGA_paper.pdf 来源&#xff1a;上海交大和华为研究院 文章目录 系列文章目录摘要一、前言二、相关工作1.基于提示的二维分割2.将2D视觉基础模型提升到3D3.辐射…

【Spark精讲】Spark on Hive性能优化

目录 第一章 1.1 集群配置概述 1.2 集群规划概述 第二章 Yarn配置 2.1 Yarn配置说明 yarn.nodemanager.resource.memory-mb yarn.nodemanager.resource.cpu-vcores yarn.scheduler.maximum-allocation-mb yarn.scheduler.minimum-allocation-mb 第三章 Spark的配置说…

力扣-42.接雨水

题目&#xff1a; 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组[0,1,0,2…