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 相关文章推荐
js call方法详细介绍(js 的继承)
Nov 18 Javascript
jquery的ajax简单结构示例代码
Feb 17 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 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实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
javascript 二维数组的实现与应用
2010/03/16 Javascript
清空上传控件input file的值
2010/07/03 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
Python如何使用字符打印照片
2020/01/03 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
python怎么自定义捕获错误
2020/06/29 Python
Python利用命名空间解析XML文档
2020/08/10 Python
python ssh 执行shell命令的示例
2020/09/29 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
彩色的非洲教学反思
2014/02/18 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫