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 相关文章推荐
一段好玩的JavaScript代码
Dec 01 Javascript
jquery.validate使用攻略 第三部
Jul 01 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
封装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中显示格式化的用户输入
2006/10/09 PHP
[原创]PHP中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
php 数组使用详解 推荐
2011/06/02 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
在centos7中分布式部署pyspider
2017/05/03 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
Python实现汇率转换操作
2020/05/03 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
python实现二分查找算法
2020/09/18 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
节能环保演讲稿
2014/08/28 职场文书
健康状况证明书
2014/11/26 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
运动会观后感
2015/06/09 职场文书
养成教育工作总结
2015/08/13 职场文书