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 相关文章推荐
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
Node.js插件安装图文教程
May 06 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
JavaScript继承的三种方法实例
May 12 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实现ODBC数据分页显示一例
2006/10/09 PHP
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
php下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
php empty() 检查一个变量是否为空
2011/11/10 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
javascript中常用编程知识
2013/04/08 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
自我鉴定写作要点
2014/01/17 职场文书
给面试官的感谢信
2014/02/01 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
高中社区服务活动报告
2015/02/05 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
2015大一新生军训感言
2015/08/01 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server
Nginx如何配置根据路径转发详解
2022/07/23 Servers