vue实现tab栏点击高亮效果

2024-10-20 05:51:04

本文实例为大家分享了tab栏实现点击高亮，供大家参考，具体内容如下

之前面试的时候被问到过如何使用vue实现tab栏切换高亮，今天自己写demo顺便记录一下

vue官方文档里有一个基础知识点叫做对象语法

<div
 class="static"
 v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
//data如下
data: {
 isActive: true,
 hasError: false
}
//渲染结果为
<div class="static active"></div>

个人觉得类似三元表达式，如果值为true则给该元素添加上指定的class

实际代码如下

<template>
 <div>
 <!-- v-for循环渲染arr -->
 <!-- 把当前点击的name通过selected传给data里的active -->
 <!-- 判断如果active的值与当前点击的name相同 则给当前点击的div加上active样式 -->
 <div id="box"
 v-for="(item,index) in arr"
 :key="index"
 @click = selected(item.name)
 :class="{active:active == item.name}"
 >
 {{item.name}}
 </div>
 </div>
</template>
<script>
export default {
 name: "index",
 data() {
 return {
 arr: [
 { name: "娃哈哈" },
 { name: "椰子汁" },
 { name: "柠檬茶" },
 { name: "可乐" },
 { name: "雪碧" }
 ],
 active: "娃哈哈"
 };
 },
 methods: {
 selected(name){
 this.active = name
 console.log(name)
 }
 }
};
</script>
<style>
.active {
 background-color: orange;
 color: white;
}
#box {
 width: 100px;
 height: 100px;
 margin: 10px;
 float: left;
 border: 1px solid #000;
}
</style>

我是前端萌新一枚，刚接触前端没多久，vue接触时间就更短了，每天进步一点点！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Sublime Text新建.vue模板并高亮(图文教程)

本文介绍了 Sublime Text新建.vue模板并高亮(图文教程),分享给大家,也给自己留个笔记. 准备工作下载安装新建文件模板插件 SublimeTmpl 下载安装vue语法高亮插件 Vue Syntax Highlight Sublime Text安装插件的方法有两种: 1.使用Sublime Text自带的安装库 Package Control 去安装点击菜单栏的 Preferences -> Package Control 或使用快捷键 CTRL+SHIFT+P 打开终端窗口,输
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持

本文介绍了详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持,分享给大家,具体如下: 一个小遗憾能来看这篇文章的想必不用我来介绍vue是什么了.先让我们膜拜大神!vue项目的创建者尤大写了个sublime下语法高亮的插件,有人问他how about webstorm support?他是这么回答的.默哀一分钟. 添加高亮和语法支持这个我是通过插件来实现的.网上目前有两个插件: 插件1:https://github.com/henjue/vue-for-idea 插件2:htt
Vue 菜单栏点击切换单个class(高亮)的方法

步骤: 遍历对象(goods)获取菜单栏每一项的对象(item)和下标(index) 添加点击事件toggle(),传入下标参数:@click="fn1();fn2()" 动态切换classname::class="{'active':index ==checkindex }"> (class赋予对应下标值的DOM) ps:该方法直接切换class,不需要手动添加清除其他非动态DOM的class html <ul> <li v-for=&qu
vue实现点击当前标签高亮效果【推荐】

实现点击按钮使当前按钮高亮,其他按钮复原的效果实现思路 •在data中定义即将渲染的数据,及active data() { return { wpList: [ { name: '食品饮料' }, { name: '鲜花' }, { name: '蛋糕' }, { name: '水果生鲜' }, { name: '服装鞋帽' }, { name: '其它' } ], active:'' } } ... •定义高亮的标签类名 .active { background: #fd7522; bord
Vue-路由导航菜单栏的高亮设置方法

如下所示: 默认情况下,路由的导航菜单,会自动给当前菜单添加router-link-exact-active 和router-link-active 类. 我们可以通过 linkActiveClass 来修改 router-link-active 这个类名, 在路由规则配置中添加配置项linkActiveClass: 'mui-active',通过'mui-active'来自定义控制菜单栏切换样式以上这篇Vue-路由导航菜单栏的高亮设置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,
基于Vue实现关键词实时搜索高亮显示关键词

最近在做移动real-time-search于实时搜索和关键词高亮显示的功能,通过博客的方式总结一下,同时希望能够帮助到别人~~~ 如果不喜欢看文字的朋友我写了一个demo方便已经上传到了github上,可以clone下来直接看代码 https://github.com/IT0315/real-time-search.git 下面是demo运行的效果图好了闲话不多说直接上代码实时搜索实时搜索通过触发input事件和定时器来实现 <input v-model="keyWords&quo
vue实现a标签点击高亮方法

如下所示: <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--<link hre
详解让sublime text3支持Vue语法高亮显示的示例

让sublime text3支持Vue语法高亮显示 1.准备语法高亮插件vue-syntax-highlight. 下载地址: https://github.com/vuejs/vue-syntax-highlight 下载页面并下载: 解开压缩包vue-syntax-highlight-master,其内所有文件备用. 2.将vue-syntax-highlight植入sbulime. 进入sublime,选择菜单项"Preferences->Browse Packages...&quo
vue结合Echarts实现点击高亮效果的示例

本文主要介绍如何在vue中使用Echarts实现点击高亮效果. 1.首先看一下官方网站上的介绍: http://echarts.baidu.com/api.html#action.graph.focusNodeAdjacency 2.在初始化的时候绑定这两个事件.需要绑定的事件是鼠标的点击事件和右键点击事件. mounted: function () { let that = this; let myChart = this.$echarts.init(document.getElementBy
vuejs 切换导航条高亮(路由菜单高亮)的方法示例

我的GitHub前端经验总结,喜欢的话请点star:Thanks.: https://github.com/liangfengbo/frontend-develop vuejs导航条高亮我的做法: 用一个数组存导航条,用v-for循环它,这样可以减少代码,二可以使用它的下标来判断高亮,三还可以获取后端的导航信息来遍历重点是在:routerLink(index, path)函数,传入当前点击的下标,自定义一个下标,判断是否相等就用三元符号判断多给一个高亮样式如何解决刷新就不高亮或第一个高亮了,

vue实现tab栏点击高亮效果

相关推荐

随机推荐