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 相关文章推荐
模拟select的代码
Oct 19 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
微信小程序基础教程之echart的使用
Jun 01 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
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
php常用字符函数实例小结
2016/12/29 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
javascript 获取表单file全路径
2009/12/31 Javascript
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
2016/06/30 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
js实现简单模态框实例
2018/11/16 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
python组合无重复三位数的实例
2018/11/13 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
django基础学习之send_mail功能
2019/08/07 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
Python排序函数的使用方法详解
2020/12/11 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
教育专业个人求职信
2013/12/02 职场文书
合同专员岗位职责
2013/12/18 职场文书
生产厂厂长岗位职责
2013/12/25 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
Oracle表空间与权限的深入讲解
2021/11/17 Oracle