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 相关文章推荐
javascript自执行函数之伪命名空间封装法
Dec 25 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
jQuery获取浏览器中的分辨率实现代码
Apr 23 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
Jun 03 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
Apr 01 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
jQuery实现移动端图片上传预览组件的方法分析
May 01 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
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
PHP学习记录之数组函数
2018/06/01 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
jQuery的强大选择器小结
2009/12/27 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
详解axios在node.js中的post使用
2017/04/27 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
跟老齐学Python之print详解
2014/09/28 Python
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
几道Web/Ajax的面试题
2016/11/05 面试题
房地产管理毕业生自荐信
2013/11/04 职场文书
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
主管会计岗位职责
2014/03/13 职场文书
岗位说明书范文
2014/05/07 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
生活部的活动方案
2014/08/19 职场文书
2016年父亲节寄语
2015/12/04 职场文书