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

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

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