v-nav指令属性列表

属性名 属性描述 类型 必选 默认
title 导航栏标题 String No 空字符串
showBackButton 是否显示(左边的)返回按钮 Boolean No false
onBackButtonClick 返回按钮点击回调函数 默认调用history.go(-1) Function No undefind
showMenuButton 是否显示(右边的)菜单按钮 Boolean No false
onMenuButtonClick 菜单按钮点击回调函数 Function No undefind
backButtonText 返回按钮文字(图标) String No 见备注
menuButtonText 菜单按钮文字(图标) String No 见备注

html页面

<div class="page has-navbar" v-nav="{title: '标题',showBackButton:true,onBackButtonClick,showMenuButton:true,onMenuButtonClick,menuButtonText:'+'}"></div>

js中需要写两个方法: onBackButtonClick 和 onMenuButtonClick , 分别对应返回按钮和菜单按钮两个事件,这里我用的是vue框架

var model={
        template: '#tem',
        data: function(){
            return data;
        },
        methods: {
       onMenuButtonClick:function(){ },
onBackButtonClick:function(){ }
    }
}

效果: 返回键和菜单键都是可以点的

vue v-nav指令属性列表的更多相关文章

  1. 前端(二十一)—— vue指令:文本类指令、避免页面闪烁、v-bind指令、v-on指令、v-model指令、条件渲染指令、列表渲染指令

    文本类指令.v-bind指令.v-on指令.v-model指令.条件渲染指令.列表渲染指令 一.文本操作 v-text:文本变量 <p v-text='msg'></p> &l ...

  2. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  3. (day65、66)Vue基础、指令、实例成员、JS函数this补充、冒泡排序

    目录 一.Vue基础 (一)什么是Vue (二)为什么学习Vue (三)如何使用Vue 二.Vue指令 (一)文本指令 (二)事件指令v-on (三)属性指令v-bind (四)表单指令v-model ...

  4. Vue成员与指令介绍

    一.Vue介绍 1.什么是vue 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围, 可以独立完成前后端分离式web项目的渐进式JavaScript框架 2.为什么要学vue 三大主流框架之 ...

  5. vue.js自定义指令入门

    Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和 ...

  6. vue 对象提供的属性功能、通过axio请求数据(2)

    1 Vue对象提供的属性功能 1.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1.1.1 使用Vue.filter()进行全局定义(全局 ...

  7. 2.0 vue内置指令与自定义指令

    1.1 常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHTML 3) v-if : 如果为 true, 当前标签才会输出到页 ...

  8. Vue基础以及指令

    Vue 基础篇一   一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...

  9. vue.js循环for(列表渲染)详解

    vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

随机推荐

  1. Spring Cloud Config采用Git存储时两种常用的配置策略

    由于Spring Cloud Config默认采用了Git存储,相信很多团队在使用Spring Cloud的配置中心时也会采用这样的策略.即便大家都使用了Git存储,可能还有各种不同的配置方式,本文就 ...

  2. NLP入门(三)词形还原(Lemmatization)

      词形还原(Lemmatization)是文本预处理中的重要部分,与词干提取(stemming)很相似.   简单说来,词形还原就是去掉单词的词缀,提取单词的主干部分,通常提取后的单词会是字典中的单 ...

  3. Python之使用Pandas库实现MySQL数据库的读写

      本次分享将介绍如何在Python中使用Pandas库实现MySQL数据库的读写.首先我们需要了解点ORM方面的知识. ORM技术   对象关系映射技术,即ORM(Object-Relational ...

  4. Opencv-python画图基础知识

    相关函数介绍 1. Point 该数据结构表示了由其图像坐标 和 指定的2D点.可定义为: Point pt; pt.x = 10; pt.y = 8; 或者 Point pt = Point(10, ...

  5. 《Redis开发与运维》读书笔记

    一.初始Redis 1.Redis特性与优点 速度快.redis所有数据都存放于内存:是用C语言实现,更加贴近硬件:使用了单线程架构,避免了多线程竞争问题 基于键值对的数据结构,支持的数据结构丰富.它 ...

  6. C#设计模式之十四命令模式(Command Pattern)【行为型】

    一.引言 今天我们开始讲“行为型”设计模式的第二个模式,该模式是[命令模式],又称为行动(Action)模式或交易(Transaction)模式,英文名称是:Command Pattern.还是老套路 ...

  7. Laravel5.5 数据库迁移:创建表与修改表

    数据库迁移是数据库的版本管理,要使用数据库迁移,需要在.env文件中连接好数据库(不多说).laravel本身已经存在user表和password_resets表的迁移了,因此,执行 php arti ...

  8. Android为TV端助力 最简单的自定义圆点view

    首先创建一个选择器,用来判断圆点状态,可以根本自己的需求改 <selector xmlns:android="http://schemas.android.com/apk/res/an ...

  9. Retrieve OpenGL Context from Qt 5.5 on OSX

    In the latest Qt 5.5, the QOpenGLWidget is much better and has less bugs than the QGLWidget, but it ...

  10. Quill Editor使用公式

    const katex = require('katex'); const win: any = window; win.katex = katex; 首先,引入katex @import '~kat ...