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更改class和id的方法
Oct 10 Javascript
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
Js sort排序使用方法
Oct 17 Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 Javascript
js对图片base64编码字符串进行解码并输出图像示例
Mar 17 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
在vue项目中引用Iview的方法
Sep 14 Javascript
使用layui的router来进行传参的实现方法
Sep 06 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
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字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
Python正则表达式匹配ip地址实例
2014/10/09 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
关于Python数据结构中字典的心得
2017/12/04 Python
Python 画出来六维图
2019/07/26 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
通过实例学习Python Excel操作
2020/01/06 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
金讯Java笔试题目
2013/06/18 面试题
致接力运动员广播稿
2014/02/17 职场文书
小学庆六一活动总结
2014/08/28 职场文书
高中教师个人总结
2015/02/10 职场文书
python中opencv实现图片文本倾斜校正
2021/06/11 Python
关于python爬虫应用urllib库作用分析
2021/09/04 Python
MySQL创建定时任务
2022/01/22 MySQL