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控制iframe滚动的代码
Apr 10 Javascript
js option删除代码集合
Nov 12 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 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
phpBB BBcode处理的漏洞
2006/10/09 PHP
建立动态的WML站点(三)
2006/10/09 PHP
php中$this-&amp;gt;含义分析
2009/11/29 PHP
解析php file_exists无效的解决办法
2013/06/26 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
PHP文件操作实例总结
2016/09/27 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
深入理解vue Render函数
2017/07/19 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
Python正则表达式的使用范例详解
2014/08/08 Python
用Python编写web API的教程
2015/04/30 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
Django实现文件上传下载
2019/10/06 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
python入门教程之基本算术运算符
2020/11/13 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
粗加工管理制度
2014/02/04 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
工作说明书范文
2014/05/07 职场文书
给校长的建议书200字
2014/05/16 职场文书
个人自我剖析材料
2014/09/30 职场文书
活着观后感
2015/06/03 职场文书