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与DropDownList 区别分析
Jan 01 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
js绘制购物车抛物线动画
Nov 18 Javascript
使用Angular CLI生成路由的方法
Mar 24 Javascript
vue引用js文件的多种方式(推荐)
May 17 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 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的方法
2007/03/16 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
决策树的python实现方法
2014/11/18 Python
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
python实现定时提取实时日志程序
2018/06/22 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
python实现银行账户系统
2021/02/22 Python
大学生暑期实践感言
2014/02/26 职场文书
2015年元旦活动总结
2014/05/09 职场文书
学校运动会霸气口号
2014/06/07 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
企业团队精神心得体会
2016/01/19 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
使用golang编写一个并发工作队列
2021/05/08 Golang
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android