VUE实现自身整体组件销毁的示例代码

 更新时间:2020年01月13日 14:26:02   作者:WC_ZIX  
这篇文章主要介绍了VUE实现自身整体组件销毁的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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)
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Vue3封装登录功能的两种实现

    Vue3封装登录功能的两种实现

    本文主要介绍了Vue3封装登录功能的两种实现,文中根据实例编码详细介绍的十分详尽,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue插件tab选项卡使用小结

    vue插件tab选项卡使用小结

    这篇文章主要为大家详细介绍了vue插件tab选项卡的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • vue-element-admin如何设置默认语言

    vue-element-admin如何设置默认语言

    这篇文章主要介绍了vue-element-admin如何设置默认语言,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue实现高德地图添加多个点标记

    vue实现高德地图添加多个点标记

    地图多点标注其实是个非常简单的问题,这篇文章主要给大家介绍了关于vue实现高德地图添加多个点标记的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • Vue项目组件化工程开发实践方案

    Vue项目组件化工程开发实践方案

    这篇文章主要介绍了Vue项目组件化工程开发实践方案,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-01-01
  • Vue实现页面的局部刷新(router-view页面刷新)

    Vue实现页面的局部刷新(router-view页面刷新)

    本文主要介绍了Vue实现页面的局部刷新(router-view页面刷新),文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • vue3.0 CLI - 2.1 -  component 组件入门教程

    vue3.0 CLI - 2.1 - component 组件入门教程

    这篇文章主要介绍了vue3.0 CLI - 2.1 - component 组件入门教程,本文主要的关注点就是组件,本文通过实例代码相结合的形式给大家介绍的非常详细,需要的朋友可以参考下
    2018-09-09
  • vue组件实现文字居中对齐的方法

    vue组件实现文字居中对齐的方法

    这篇文章主要为大家详细介绍了vue组件实现文字居中对齐的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • van-dialog弹窗异步关闭功能-校验表单实现

    van-dialog弹窗异步关闭功能-校验表单实现

    有时候我们需要通过弹窗去处理表单数据,在原生微信小程序配合vant组件中有多种方式实现,其中UI美观度最高的就是通过van-dialog嵌套表单实现,这篇文章主要介绍了van-dialog弹窗异步关闭-校验表单,需要的朋友可以参考下
    2023-11-11
  • vue组件实现进度条效果

    vue组件实现进度条效果

    这篇文章主要为大家详细介绍了vue组件实现进度条效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-06-06

最新评论