VUE实现自身整体组件销毁的示例代码


Posted in Javascript onJanuary 13, 2020

V-IF实现组件自身销毁

前面说了一些自己怎么思考得来,如果时间急可直接看

最后~~~~

通知提示组件案例分析

在编写一些简单的通知组件案例中,可能会这样去写

//在[index.js]的install方法里
setTimeOut(()=>{
  document.body.removeChild([DOM])
, timer}
//定时的移除DOM

再看另一个Loading插件案例V-show

template :

<template>
 <div class="box-container" v-show="showLoading">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div class="box5"></div>
  <div class="box6"></div>
  <div class="content">loading</div>
 </div>
</template>

javascript :

export default {
  name: 'loading',
  data(){
   return {
    showLoading: false
   }
  },
  methods: {
   show(){
    this.showLoading = true
   },
   hidden(){
    this.showLoading = false
   }
  },
  mounted() {
   console.log('Loading is mounted!!!')
  },
 }

看完上一个联想V-IF控制DOM渲染

因此在template里div最外层绑定v-if属性就可以,再有方法控制其值即可

template :

<template>
 <div id="text" v-if="canShow">
  <div>aaaaaaaaaaaaa</div>
 </div>
</template>
javascript :

export default {
 name: 'Test',
 data() {
  return {
   canShow: true
  }
 },
 mounted() {
  setTimeout(()=>{
   this.canShow = false
  },1000)
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 面向对象的5钟写法
Jul 31 Javascript
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
js展开闭合效果演示代码
Jul 24 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
微信小程序聊天功能的示例代码
Jan 13 #Javascript
js实现适配移动端的拖动效果
Jan 13 #Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 #Javascript
优化Vue中date format的性能详解
Jan 13 #Javascript
JS document文档的简单操作完整示例
Jan 13 #Javascript
JavaScript数组排序小程序实现解析
Jan 13 #Javascript
JS document form表单元素操作完整示例
Jan 13 #Javascript
You might like
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
php的ddos攻击解决方法
2015/01/08 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
js clearInterval()方法的定义和用法
2015/11/11 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
javascript中this用法实例详解
2017/04/06 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
Python实现爬取逐浪小说的方法
2015/07/07 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
kafka-python批量发送数据的实例
2018/12/27 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
秋收起义观后感
2015/06/11 职场文书
意外事故赔偿协议书
2016/03/22 职场文书