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 相关文章推荐
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
angularjs中ng-attr的用法详解
Dec 31 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
详解js加减乘除精确计算
Mar 19 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 Javascript
js实现列表按字母排序
Aug 11 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
JAVA/JSP学习系列之六
2006/10/09 PHP
基于mysql的bbs设计(三)
2006/10/09 PHP
php数组添加元素方法小结
2014/12/20 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
jquery插件开发方法(初学者)
2012/02/03 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
使用Python设置tmpfs来加速项目的教程
2015/04/17 Python
python实现给数组按片赋值的方法
2015/07/28 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
Python实现代码块儿折叠
2020/04/15 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
简历的个人自我评价范文
2014/01/03 职场文书
小学运动会班级口号
2014/06/09 职场文书
单位在职证明书
2014/09/11 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
环保建议书作文400字
2015/09/14 职场文书