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 相关文章推荐
Prototype Object对象 学习
Jul 12 Javascript
jQuery prev ~ siblings选择器使用介绍
Aug 09 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
javascript 常见功能汇总
Jun 11 Javascript
整理Javascript事件响应学习笔记
Dec 02 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 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
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
让焦点自动跳转
2006/07/01 Javascript
javascript 限制输入脚本大全
2009/11/03 Javascript
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
python实现绘制树枝简单示例
2014/07/24 Python
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
Python检测数据类型的方法总结
2019/05/20 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
python中open函数的基本用法示例
2019/09/07 Python
python3 xpath和requests应用详解
2020/03/06 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
英国景点门票网站:attractiontix
2019/08/27 全球购物
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
英语专业学子个人的自我评价
2013/10/02 职场文书
个人素质的自我评价分享
2013/12/16 职场文书
拆迁委托协议书
2014/09/15 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
大学军训的体会
2014/11/08 职场文书
个人创业事迹材料
2014/12/30 职场文书
银行员工考核评语
2014/12/31 职场文书
庭外和解协议书
2016/03/23 职场文书
Elasticsearch 索引操作和增删改查
2022/04/19 Python