步骤:

  • 遍历对象(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 菜单栏点击实现高亮显示的更多相关文章

  1. 简单实现vue列表点击某个高亮显示

    比如ul下有4个li元素. 给每个li绑定点击事件@click="select_li(index),然后这个点击时间会将一个全局变量 selectLi 赋值为 index 的值. 然后在每个 ...

  2. vue 如何点击按钮返回上一页

    1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...

  3. vue验证码点击更新

    vue验证码点击更新 不说啥,直接贴代码 html: <img class="captcha" @click="editCaptcha" :src=&qu ...

  4. vue实现点击图标,图标在2s中完成旋转

    <!-- 点击 vue实现点击图标,图标在2s中完成旋转 1==>如何让它在2s内完成旋转 使用动画 transform: rotate(-180deg); 动画的运动状态 transit ...

  5. vue 的点击事件怎么获取当前点击的元素

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元   首先 vue的点击事件 是用 @cl ...

  6. vue实现点击展开,点击收起

    安装vue的步骤在这里就不进行赘述了,下面直接进入正题 首先定义一下data里面的数据: data () { return { toLearnList:[ 'html','css','javascri ...

  7. Vue——轻松实现vue底部点击加载更多

    前言 需求总是不断改变的,好吧,今天就把vue如何实现逐步加载更多和分布加载更多说下,默认你知道如何去请求数据的哈 一次请求 页面 使用slice来进行限制展现从0,a的数据 <div v-fo ...

  8. Vue延迟点击

    从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间 fastclick清除点击延迟,让程序更灵敏 1.导出fastclick import Vue from ...

  9. Eclipse鼠标点击变量高亮显示时好时坏的BUG

    Eclipse有一个BUG,就是鼠标点击某个变量会高亮显示所有这个变量 会有时高亮有时不高亮,修复这个BUG就是替换Eclipse 安装目录plugins目录下的org.eclipse.e4.ui.w ...

随机推荐

  1. 使用光盘作为yum源安装ifconfig等网络命令

    # mkdir -p /mnt/cdrom# 如果是光驱:mount -t iso9660 /dev/cdrom /mnt/cdrom/# 如果是ISO:mount -o loop /usr/loca ...

  2. Boost1.67编译+CMake Generate时遇到的一个错误

    下载的一个库编译时依赖boost,记录一下boost的编译: 下载源码 vs命令行里cd到根目录,运行bootstrap.bat,发现多了几个文件{b2.exe.bjam.exe.project-co ...

  3. JavaScript 消息框

    警告框 alert(); 确认框 var message=confirm("你喜欢javascript吗"); if(message==true){ document.write( ...

  4. The features of Swift

    The features of Swift are designed to work together to create a language that is powerful, yet fun t ...

  5. Robot Framework(四)创建测试套件

    2.3.1测试用例文件 Robot Framework测试用例是使用测试用例文件中的测试用例表创建的.这样的文件会自动从它包含的所有测试用例中创建一个测试套件.可以有多少测试用例没有上限,但建议少于1 ...

  6. 【udacity】机器学习-波士顿房价预测小结

    Evernote Export 机器学习的运行步骤 1.导入数据 没什么注意的,成功导入数据集就可以了,打印看下数据的标准格式就行 用个info和describe 2.分析数据 这里要详细分析数据的内 ...

  7. ToDoList(原生JS)了解一下

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JavaScript进阶【二】JavaScript 严格模式(use strict)的使用

    /*** *使用严格模式的原因: * ①:消除Javascript语法的一些不合理.不严谨之处,减少一些怪异行为; ②:消除代码运行的一些不安全之处,保证代码运行的安全: ③:提高编译器效率,增加运行 ...

  9. Linux 中常用的基础命令二

    1.Linux文件分层结构  FHS:Linux有一个组织叫LSB定义的Linux发行版基础目录名称命名法则及功用规定,这种标准叫FHS文件系统层级标准./bin   存放可执行的二进制程序,管理员和 ...

  10. php 安装mysql扩展注意事项

    1.yum search php-mysql (Linux环境) 这一点,根据具体的情况会遇到不同的搜索结果.我搜索到的结果是:php-mysql.i386 : A module for PHP ap ...