欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-22 14:23:15
v-if实现组件自身销毁 前面说了一些自己怎么思考得来,如果时间急可直接看 最后~~~~ 通知提示组件案例分析 在编写一些简单的通知组件案例中,可能会这样去写...

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

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