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 判断数组是否已包含了某个元素的函数
May 30 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
js下载文件并修改文件名
May 08 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
vue服务端渲染缓存应用详解
Sep 12 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 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
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
谈谈新手如何学习PHP
2006/12/23 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
php截取中文字符串函数实例
2015/02/23 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
jquery动态添加删除一行数据示例
2014/06/12 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
python中for语句简单遍历数据的方法
2015/05/07 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
python 如何快速复制序列
2020/09/07 Python
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
学习党课思想汇报
2013/12/29 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers