Vue 菜单栏点击实现高亮显示
步骤:
- 遍历对象(goods)获取菜单栏每一项的对象(item)和下标(index)
- 添加点击事件toggle(),传入下标参数:
@click="fn1();fn2()"
- 动态切换classname:
:class="{'active':index ==checkindex }">
(class赋予对应下标值的DOM)
ps:该方法直接切换class,不需要手动添加清除其他非动态DOM的class
html:
<ul>
<li v-for="(item,index) in goods" class="menu-item" @click="toggle(index);scrollToFoods(index)" :class="{'active':index ==checkindex }">
</li>
</ul>
js:
export default {
data () {
return {
checkindex: 0 // 初始化第一个栏块高亮
}
},
methods: {
toggle (index) {
this.checkindex = index
}
css:
.active {
background: white;
}
上边的几行代码就能搞定这个功能,可能是没有想到的时候感觉有点难,等到做出来之后,就感觉没这么难了。
Vue 菜单栏点击实现高亮显示的更多相关文章
- 简单实现vue列表点击某个高亮显示
比如ul下有4个li元素. 给每个li绑定点击事件@click="select_li(index),然后这个点击时间会将一个全局变量 selectLi 赋值为 index 的值. 然后在每个 ...
- vue 如何点击按钮返回上一页
1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...
- vue验证码点击更新
vue验证码点击更新 不说啥,直接贴代码 html: <img class="captcha" @click="editCaptcha" :src=&qu ...
- vue实现点击图标,图标在2s中完成旋转
<!-- 点击 vue实现点击图标,图标在2s中完成旋转 1==>如何让它在2s内完成旋转 使用动画 transform: rotate(-180deg); 动画的运动状态 transit ...
- vue 的点击事件怎么获取当前点击的元素
手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 首先 vue的点击事件 是用 @cl ...
- vue实现点击展开,点击收起
安装vue的步骤在这里就不进行赘述了,下面直接进入正题 首先定义一下data里面的数据: data () { return { toLearnList:[ 'html','css','javascri ...
- Vue——轻松实现vue底部点击加载更多
前言 需求总是不断改变的,好吧,今天就把vue如何实现逐步加载更多和分布加载更多说下,默认你知道如何去请求数据的哈 一次请求 页面 使用slice来进行限制展现从0,a的数据 <div v-fo ...
- Vue延迟点击
从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间 fastclick清除点击延迟,让程序更灵敏 1.导出fastclick import Vue from ...
- Eclipse鼠标点击变量高亮显示时好时坏的BUG
Eclipse有一个BUG,就是鼠标点击某个变量会高亮显示所有这个变量 会有时高亮有时不高亮,修复这个BUG就是替换Eclipse 安装目录plugins目录下的org.eclipse.e4.ui.w ...
随机推荐
- Q1002 四则运算
#include<iostream> using namespace std; int main() { long long sum1,sum2,sum3,sum4; long int a ...
- 【领略RxSwift源码】- 变换操作(Operators)
在上一篇中,我们分析了在RxSwift中的整个订阅流程.在开讲变换操作之前,首先要弄清楚Sink的概念,不清楚的同学可以翻看上一篇的分析.简单的来说,在每一次订阅操作之前都会进行一次Sink对流的操作 ...
- Discuz 3x 配置问题
1.注意config里面配置的路径 2.注意ucenter里面 的密钥要一直 3.IP 的选择
- JS 从100里面随机取10个数比大小
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 功分器 power divider
之前讲过有了解过耦合器,知道耦合器是矢网测量当中的关键设备 coupler //------------------------------------------------------------ ...
- 洛谷P1739 表达式括号匹配
题目描述 假设一个表达式有英文字母(小写).运算符(+,-,*,/)和左右小(圆)括号构成,以"@"作为表达式的结束符.请编写一个程序检查表达式中的左右圆括号是否匹配,若匹配,则返 ...
- FansUnion:共同写博客计划终究还是“流产”了
首先说说我原本的计划:我和周围的同学.朋友.好友 共同维护一个博客. 我对其他人并没有过高的期待.我一个人的写作量 = 其他人的写作量. 现实是,其他人没有怎么写. 对于,这个结果,我非常低无奈.谩骂 ...
- DOM中元素节点,属性节点,文本节点的理解
节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是: nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可 ...
- js日期原型扩展
当初做统计业务需要处理时间 周报:本周 上周 下周 近一周 月报上月 本月 等 需要使用时间处理 所以扩展了这些方法 <!DOCTYPE html> <html xmlns=&quo ...
- 洛谷—— P3353 在你窗外闪耀的星星
https://www.luogu.org/problem/show?pid=3353 题目描述 飞逝的的时光不会模糊我对你的记忆.难以相信从我第一次见到你以来已经过去了3年.我仍然还生动地记得,3年 ...