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 setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
JavaScript Scoping and Hoisting 翻译
Jul 03 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
Jquery动态进行图片缩略的原理及实现
Aug 13 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
微信小程序 表单Form实例详解(附源码)
Dec 22 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 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
晶体管来复再生式二管收音机
2021/03/02 无线电
用PHP制作静态网站的模板框架(一)
2006/10/09 PHP
php 进度条实现代码
2009/03/10 PHP
在PHP中使用curl_init函数的说明
2010/11/02 PHP
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
动态加载js的几种方法
2006/10/23 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
jQuery参数列表集合
2011/04/06 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
Python编程之属性和方法实例详解
2015/05/19 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
Python assert关键字原理及实例解析
2019/12/13 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
python中format函数如何使用
2020/06/22 Python
和睦家庭事迹
2014/05/14 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
公务员政审个人总结
2015/02/12 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
Python自动化爬取天眼查数据的实现
2021/06/15 Python