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

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