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 触发HTML元素绑定的函数
Sep 11 Javascript
js TextArea的选中区域处理
Dec 28 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
vue自定义全局共用函数详解
Sep 18 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
Vue实现圆环进度条的示例
Feb 06 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
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
2014年秋季开学演讲稿
2014/05/24 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
股权转让协议书
2014/12/07 职场文书
告知书格式
2015/07/01 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
python自动化八大定位元素讲解
2021/07/09 Python