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 pagination插件实现无刷新分页代码
Oct 13 Javascript
Jquery AJAX 框架的使用方法
Nov 03 Javascript
一个简单的jQuery插件制作 学习过程及实例
Apr 25 Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
js获取ip和地区
Mar 10 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
JavaScript实现与web通信的方法详解
Aug 07 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
PR值查询 | PageRank 查询
2006/12/20 PHP
php 404错误页面实现代码
2009/06/22 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
php之可变函数的实例详解
2017/09/13 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
jquery foreach使用示例
2013/09/12 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
移动端js图片查看器
2016/11/17 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
VUE长按事件需求详解
2017/10/18 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
python实现按行切分文本文件的方法
2016/04/18 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
python os.path模块常用方法实例详解
2018/09/16 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
美国Max仓库:Max Warehouse
2020/05/31 全球购物
战友聚会邀请函
2014/01/18 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
财务学生的职业生涯发展
2014/02/11 职场文书
蜗居观后感
2015/06/11 职场文书
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
Windows7下FTP搭建图文教程
2022/08/05 Servers