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 相关文章推荐
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
JS实现一键回顶功能示例代码
Oct 28 Javascript
javascript实现json页面分页实例代码
Feb 20 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
7个jQuery最佳实践
Jan 12 Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 Javascript
微信小程序聊天功能的示例代码
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
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
php中AES加密解密的例子小结
2014/02/18 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
JavaScript中创建原子的方法总结
2018/08/26 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
大学生创业感言
2014/01/25 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
北京英语导游词
2015/02/12 职场文书
2016年公司新年寄语
2015/08/17 职场文书
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL