vue2.0 实现页面导航提示引导的方法


Posted in Javascript onMarch 13, 2018

用户在进行一些新的操作流程时,提供一些导航流程也是必要的。项目中采用的是iview 的对话框进行实现的。

demo:

<Modal v-if="modalOFF === 1">
  <p>这里是对话框一</p>
  <button @click="modalOFF = 2"></button>
  </Modal>
  <Modal v-if="modalOFF === 2">
  <p>这里是对话框二</p>
  <button @click="modalOFF = 3"></button>
  </Modal>
  <Modal v-if="modalOFF === 3">
  <p>这里是对话框二</p>
  <button @click="modalOFF = null"></button>
  </Modal>

js代码:

让谁先显示,就在data中定义modalOFF的属性值。默认是
 modalOFF: 1,

当modalOFF为null的时候,对话框也就消失了。

以上这篇vue2.0 实现页面导航提示引导的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
潜说js对象和数组
May 25 Javascript
javascript打印输出json实例
Nov 11 Javascript
JS二维数组的定义说明
Mar 03 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
详解vue的diff算法原理
May 20 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 #Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 #Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 #Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 #Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 #Javascript
setTimeout时间设置为0详细解析
Mar 13 #Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 #Javascript
You might like
怎样在UNIX系统下安装php3
2006/10/09 PHP
一些php技巧与注意事项分析
2011/02/03 PHP
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
对python:print打印时加u的含义详解
2018/12/15 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
python中count函数简单的实例讲解
2020/02/06 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
一文读懂Python 枚举
2020/08/25 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
悬空寺导游词
2015/02/05 职场文书
求职简历自我评价范文
2015/03/10 职场文书
企业战略合作意向书
2015/05/08 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书