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 相关文章推荐
JS的数组的扩展实例代码
Jul 09 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
layui中select,radio设置不生效的解决方法
Sep 05 Javascript
原生js实现照片墙效果
Oct 13 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
用PHP实现多级树型菜单
2006/10/09 PHP
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
PHP 安全检测代码片段(分享)
2013/07/05 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
PHP页面中文乱码分析
2013/10/29 PHP
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
一些javascript一些题目的解析
2010/12/25 Javascript
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
python em算法的实现
2020/10/03 Python
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
医学院学生求职简历的自我评价
2013/10/24 职场文书
行政助理岗位职责范文
2013/12/03 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
十八大观后感
2015/06/12 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python