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. HttpClient+Jsoup模拟登陆贺州学院教务系统,获取学生个人信息

    前言 注:可能学校的教务系统已经做了升级,当前的程序不知道还能不能成功获取信息,加上已经毕业,我的账户已经被注销,试不了,在这里做下思路跟过程的记录. 在我的毕业设计中”基于SSM框架贺州学院校园二手 ...

  2. [JavaScript] 前端模块加载简单实现(require)

    模块加载的简单实现 (function(win) { var baseUrl; var paths; var script_cache = {}; var script_queue = []; var ...

  3. maven web工程缺少 src/main/java 和 src/test/java 资源文件夹的方法

    右键打开:build path -> configure build path... 在弹出的界面,选择: 编辑后: 点击finish,即可完成

  4. 南大算法设计与分析课程OJ答案代码(2)最大子序列和问题、所有的逆序对

    问题 A: 最大子序列和问题 时间限制: 1 Sec  内存限制: 4 MB提交: 184  解决: 66提交 状态 算法问答 题目描述 给定一整数序列 a1, a2, …, an,求 a1~an 的 ...

  5. 模块热替换 HMR

    devserver:{hot:true},既及时更新代码,样式(需配合loader)变化,自动重编译,只适用于开发环境. 入口文件中,添加监视: + if (module.hot) {+ module ...

  6. hive SQL查询结果添加行号

    用窗口函数可以解决这个问题: 例:select row_number() over(order by user_id desc) ,tab.* from dws_user_visit_month1 a ...

  7. js-string.js

    //小结// string.charAt(pos) 返回string中pos所在位置的字符 var name = "Cynthia"; var i = name.charAt(0) ...

  8. HTML 请求头,响应头和 HTTP状态码

    请求头 选项 说明 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8 告诉服务器,当前客户端可以接收的文档类型 ...

  9. file 文件上传,下载,删除

    html: <div class="col-md-4 col-sm-4"> <div class="portlet light bordered&quo ...

  10. SAP MM 物料主数据采购视图中的字段'Var. OUn'的作用?

    SAP MM 物料主数据采购视图中的字段'Var. OUn'的作用? 物料主数据采购视图里有一个字段,叫做'Var. OUn'的, 如下图: 这个字段,笔者之前所参与的项目里,从来没有用过.所以,笔者 ...