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 相关文章推荐
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 Javascript
JS实现扫雷项目总结
May 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
PHP 和 XML: 使用expat函数(二)
2006/10/09 PHP
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
理解python多线程(python多线程简明教程)
2014/06/09 Python
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
python多进程并行代码实例
2019/09/30 Python
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
什么是跨站脚本攻击
2014/12/11 面试题
大专毕业生自我鉴定
2013/11/21 职场文书
社区活动总结报告
2014/05/05 职场文书
教师读书活动总结
2014/05/07 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
高中生旷课检讨书
2014/10/08 职场文书
2015年考研复习计划
2015/01/19 职场文书
单位政审意见范文
2015/06/04 职场文书
护士业务学习心得体会
2016/01/25 职场文书
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python