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 ...
随机推荐
- JVM上的下一个Java——Scala
Scala是一种针对 JVM 将函数和面向对象技术组合在一起的编程语言.Scala编程语言近来抓住了很多开发者的眼球.它看起来像是一种纯粹的面向对象编程语言,而又无缝地结合了命令式和函数式的编程风格. ...
- js 把json字符串转为json对象
<input type="hidden" name="data" id="data" value='[{"name&q ...
- Debian 6 , 十个串口为什么只识别到了 6个 剩下4 个被禁止了
0.946441] Serial: 8250/16550 driver, 6 ports, IRQ sharing enabled [ 0.946533] serial8250: ttyS0 a ...
- c++ 字符串和数字拼接
方法一: #include <iostream> #include <string> #include <sstream> using namespace std; ...
- pywinauto进阶练习
case1.画图工具简单练习 #_*_coding=utf-8_*_ import time from pprint import pprint import logging from logging ...
- mysql 与 memcache 字段名后面有空格时会产生什么问题(转)
同事下午遇到一问题,MySQL 和 Memcached 对于同一个key,不能对应起来.最终原因是:PHP将key写入MySQL数据库之前,没有经过trim()过滤首尾空格(关键是尾部空格),结果: ...
- fork() 函数解析
转载自http://blog.csdn.net/jason314/article/details/5640969 一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通 ...
- 40 最小的K个数(时间效率)
题目描述: 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. 测试用例: 功能测试(输入的数组中有相同的数字:输入的数组中 ...
- UVA10200 Prime Time
/* UVA10200 Prime Time https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8& ...
- mysql数据库优化原则
一.一个例子 数据库需要处理的行数: 189444*1877*13482~~~479亿 如果在关联字段上加上合适的索引: 数据库需要处理的行数:368006*1*3*1~~~110万 MySQL通常是 ...