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 相关文章推荐
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
jQuery知识点整理
Jan 30 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
vue.js实现只能输入数字的输入框
Oct 19 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 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 随机数的深入理解
2013/06/05 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
AutoSave/自动存储功能实现
2007/03/24 Javascript
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
python调用cmd复制文件代码分享
2013/12/27 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
Python多进程原理与用法分析
2018/08/21 Python
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
20岁生日感言
2014/01/13 职场文书
十佳美德少年事迹材料
2014/02/05 职场文书
一名老师的自我评价
2014/02/07 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
学习经验交流会策划书
2015/11/02 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android