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 ...
随机推荐
- 使用光盘作为yum源安装ifconfig等网络命令
# mkdir -p /mnt/cdrom# 如果是光驱:mount -t iso9660 /dev/cdrom /mnt/cdrom/# 如果是ISO:mount -o loop /usr/loca ...
- Boost1.67编译+CMake Generate时遇到的一个错误
下载的一个库编译时依赖boost,记录一下boost的编译: 下载源码 vs命令行里cd到根目录,运行bootstrap.bat,发现多了几个文件{b2.exe.bjam.exe.project-co ...
- JavaScript 消息框
警告框 alert(); 确认框 var message=confirm("你喜欢javascript吗"); if(message==true){ document.write( ...
- The features of Swift
The features of Swift are designed to work together to create a language that is powerful, yet fun t ...
- Robot Framework(四)创建测试套件
2.3.1测试用例文件 Robot Framework测试用例是使用测试用例文件中的测试用例表创建的.这样的文件会自动从它包含的所有测试用例中创建一个测试套件.可以有多少测试用例没有上限,但建议少于1 ...
- 【udacity】机器学习-波士顿房价预测小结
Evernote Export 机器学习的运行步骤 1.导入数据 没什么注意的,成功导入数据集就可以了,打印看下数据的标准格式就行 用个info和describe 2.分析数据 这里要详细分析数据的内 ...
- ToDoList(原生JS)了解一下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript进阶【二】JavaScript 严格模式(use strict)的使用
/*** *使用严格模式的原因: * ①:消除Javascript语法的一些不合理.不严谨之处,减少一些怪异行为; ②:消除代码运行的一些不安全之处,保证代码运行的安全: ③:提高编译器效率,增加运行 ...
- Linux 中常用的基础命令二
1.Linux文件分层结构 FHS:Linux有一个组织叫LSB定义的Linux发行版基础目录名称命名法则及功用规定,这种标准叫FHS文件系统层级标准./bin 存放可执行的二进制程序,管理员和 ...
- php 安装mysql扩展注意事项
1.yum search php-mysql (Linux环境) 这一点,根据具体的情况会遇到不同的搜索结果.我搜索到的结果是:php-mysql.i386 : A module for PHP ap ...