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帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
javascript json 新手入门文档
Dec 03 Javascript
js 格式化时间日期函数小结
Mar 20 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
jQuery实现带延迟效果的滑动菜单代码
Sep 02 Javascript
详解javascript数组去重问题
Nov 06 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
vue-cli3 配置开发与测试环境详解
May 17 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
jquery 学习之一 对象访问
2010/11/23 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
2019/06/19 jQuery
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
Python中Random和Math模块学习笔记
2015/05/18 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
新手学python应该下哪个版本
2020/06/11 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
专营店会计助理岗位职责
2013/11/29 职场文书
建筑公司文秘岗位职责
2013/11/29 职场文书
年终总结会议主持词
2014/03/17 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书
2015年少先队活动总结
2015/03/25 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技