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 相关文章推荐
斜45度寻路实现函数
Aug 20 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 Javascript
js中window.open()的所有参数详细解析
Jan 09 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
js判断是否是手机页面
Mar 17 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 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 ci框架验证码实例分析
2013/06/26 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
python中的随机函数random的用法示例
2018/01/27 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
对pytorch的函数中的group参数的作用介绍
2020/02/18 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
母亲追悼会答谢词
2014/01/27 职场文书
写给女朋友的检讨书
2014/01/28 职场文书
2014年党员整改措施
2014/10/24 职场文书
应聘教师求职信范文
2015/03/20 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python