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 相关文章推荐
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
一些常用的JS功能函数代码
Jun 23 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
使用js 设置url参数
Jul 08 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
vue监听对象及对象属性问题
Aug 20 Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
html5 录制mp3音频支持采样率和比特率设置
Jul 15 Javascript
小程序实现侧滑删除功能
Jun 25 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
PHP数据缓存技术
2007/02/14 PHP
超级好用的一个php上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
python虚拟环境的安装配置图文教程
2017/10/20 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
管理学专业个人求职信范文
2013/09/21 职场文书
前台文员个人求职信范文
2014/01/05 职场文书
关于毕业的中学校园广播稿
2014/01/26 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
天下第一关导游词
2015/02/06 职场文书
文化大革命观后感
2015/06/17 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python
python中数组和列表的简单实例
2022/03/25 Python