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 相关文章推荐
top.location.href 没有权限 解决方法
Aug 05 Javascript
清空上传控件input file的值
Jul 03 Javascript
javascript常用的正则表达式实例
May 15 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
js module大战
Apr 19 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
vue中watch和computed的区别与使用方法
Aug 23 Javascript
关于Javascript闭包与应用的详解
Apr 22 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
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
php实现的SESSION类
2014/12/02 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
asp 的 分词实现代码
2007/05/24 Javascript
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
JavaScript中的编码和解码函数
2017/02/15 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
网络安全类面试题
2015/08/01 面试题
门卫人员岗位职责
2013/12/24 职场文书
简历的自我评价范文
2014/02/04 职场文书
农村改厕实施方案
2014/03/22 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
新员工试用期自我评价
2015/03/10 职场文书
刑事申诉状范文
2015/05/20 职场文书