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 相关文章推荐
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
Vue 自定义动态组件实例详解
Mar 28 Javascript
详解Vue SPA项目优化小记
Jul 03 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 Javascript
vue keep-alive的简单总结
Jan 25 Vue.js
一文帮你理解PReact10.5.13源码
Apr 03 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 smarty模版引擎中的缓存应用
2009/12/11 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
迅速确定php多维数组的深度的方法
2014/01/07 PHP
隐性调用php程序的方法
2015/06/13 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
浅析javascript的return语句
2015/12/15 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
Python自定义简单图轴简单实例
2018/01/08 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
大学生军训自我鉴定
2014/02/12 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
儿子满月酒致辞
2015/07/29 职场文书
springboot读取nacos配置文件
2022/05/20 Java/Android
Android中View.post和Handler.post的关系
2022/06/05 Java/Android