vue头部导航动态点击处理方法


Posted in Javascript onNovember 02, 2018

1:DATA中两个变量,

data: {
       nav:['头条1','头条2'],
       ins:0,//记录当前点击的INDEX
      },

2:              

<div v-for="(item,index) in nav" :class="index == ins ? 'swiper-slide swiper_active' : 'swiper-slide' " @click="topClick(index)">{{item}}</div>

3:mothods:

topClick:function(i){
        var t=this;
        t.ins=i;
      },

ps:下面看下vue实现动态头部

h5项目中,经常用到的头部是样式是一致的,只是左右按钮和中间标题会不一致。

vue主打组件化,为了减少代码冗余,可以将头部提取成一个单独的组件。接下来考虑是否需要左右按钮,是否固定在页面上不动,中间标题是否为动态。

先写一个简单的头部,position设置成变量customFixed。左右按钮通过<slot>来控制。中间标题设置成变量customTitle通过父子组件传值过来。

设置好样式以后给customFixed和customTitle默认值和类型。

<template>
  <div id="header" :style="{'position' : customFixed ? 'fixed' : 'absolute'}">
   <slot name="left"></slot>
   {{customTitle}}
   <slot name="right"></slot>
  </div>
</template>

<script>
  export default {
   name: "my-header",
   props:{
    customTitle : {
      type : String,
      default : '标题'
     },
    customFixed: {
      type: Boolean,
      default: false
    }
   }
  }
</script>

<style scoped>
#header{
 width: 100%;height: 40px;background: #666;color: white;text-align: center;line-height: 40px;
 position: absolute;left:0;top: 0;z-index: 10;
}
 #header button {height: 100%;padding: 0 50px;}
 #header button:nth-of-type(1){float: left}
 #header button:nth-of-type(2){float: right}
</style>

在用到头部的地方:

<template>
 <div id="app">
  <my-header custom-title="通讯录" custom-fixed>
   <button @click="backBtn" slot="left">返回</button>
   <button @click="homeBtn" slot="right">主页</button>
  </my-header>
 </div>
</template>

总结

以上所述是小编给大家介绍的vue头部导航动态点击处理方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
基于jquery可配置循环左右滚动例子
Sep 09 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
javascript分页代码(当前页码居中)
Sep 20 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
Vue开发环境跨域访问问题
Jan 22 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 #Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 #Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 #Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 #Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 #Javascript
vue实现与安卓、IOS交互的方法
Nov 02 #Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 #Javascript
You might like
一个MYSQL操作类
2006/11/16 PHP
PHP经典的给图片加水印程序
2006/12/06 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
django 模版关闭转义方式
2020/05/14 Python
Python实现异步IO的示例
2020/11/05 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
在购买印度民族服饰:Soch
2020/09/15 全球购物
什么是Smart Navigation?
2016/07/03 面试题
两则小学生的自我评价分享
2013/11/14 职场文书
车间副主任岗位职责
2013/12/24 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
2015年公司新年寄语
2014/12/08 职场文书
民事辩护词范文
2015/05/21 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
python基础入门之普通操作与函数(三)
2021/06/13 Python
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android