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 相关文章推荐
小议javascript 设计模式 推荐
Oct 28 Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
javascript时间差插件分享
Jul 18 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
VueJS全面解析
Nov 10 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
Sep 18 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
node 版本切换的实现
Feb 02 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
php获取POST数据的三种方法实例详解
2016/12/20 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
基于JavaScript实现树形下拉框
2016/08/10 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
python对html过滤处理的方法
2018/10/21 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
python可视化text()函数使用详解
2020/02/11 Python
使用python实现飞机大战游戏
2020/03/23 Python
python对XML文件的操作实现代码
2020/03/27 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
什么是java序列化,如何实现java序列化
2012/11/14 面试题
机械专业应届生求职信
2013/09/21 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
结婚老公保证书
2015/02/26 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis