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 相关文章推荐
Array.prototype.slice 使用扩展
Jun 09 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
javascript实现简单的分页特效
Aug 12 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
浅谈react 同构之样式直出
Nov 07 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
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
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
input 高级限制级用法
2009/03/26 Javascript
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
jQuery链使用指南
2015/01/20 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
用Python实现读写锁的示例代码
2018/11/05 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
旅游管理实习自我鉴定
2013/09/29 职场文书
工商管理专业应届生求职信
2013/11/04 职场文书
贷款委托书范本
2014/04/08 职场文书
作文评语集锦大全
2014/04/23 职场文书
培训师岗位职责
2015/02/14 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS