VUE實現自身整體元件銷燬的示例程式碼
阿新 • • 發佈:2020-01-14
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) } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。