vue实现tab栏点击高亮效果


Posted in Javascript onAugust 19, 2020

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

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

vue实现tab栏点击高亮效果

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接触时间就更短了,每天进步一点点!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
jquery滚动特效集锦
Jun 03 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
纯javascript版日历控件
Nov 24 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
详解vuex状态管理模式
Nov 01 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 #Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 #Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 #Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 #Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 #Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 #Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 #Javascript
You might like
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
php实现文件下载代码分享
2014/08/19 PHP
PHP微信API接口类
2016/08/22 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
Express.JS使用详解
2014/07/17 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
js自定义回调函数
2015/12/13 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
详解Python中的__init__和__new__
2014/03/12 Python
python使用PyGame模块播放声音的方法
2015/05/20 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
新颖的化妆品活动方案
2014/08/21 职场文书
民间个人借款协议书
2014/09/30 职场文书
会议开幕词
2015/01/28 职场文书
小马王观后感
2015/06/11 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
nginx中proxy_pass各种用法详解
2021/11/07 Servers