VUE實現(xiàn)自身整體組件銷毀的示例代碼
更新時間:2020年01月13日 14:26:02 作者:WC_ZIX
這篇文章主要介紹了VUE實現(xiàn)自身整體組件銷毀的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
V-IF實現(xiàn)組件自身銷毀
前面說了一些自己怎么思考得來,如果時間急可直接看
最后~~~~
通知提示組件案例分析
在編寫一些簡單的通知組件案例中,可能會這樣去寫
//在[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!!!') }, }
看完上一個聯(lián)想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) } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
vue+element-ui+axios多文件上傳的實現(xiàn)并顯示整體進度
這篇文章主要介紹了vue+element-ui+axios多文件上傳的實現(xiàn)并顯示整體進度,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04Vue+Element UI+vue-quill-editor富文本編輯器及插入圖片自定義
這篇文章主要為大家詳細介紹了Vue+Element UI+vue-quill-editor富文本編輯器及插入圖片自定義,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-08-08Create?vite理解Vite項目創(chuàng)建流程及代碼實現(xiàn)
這篇文章主要為大家介紹了Create?vite理解Vite項目創(chuàng)建流程及代碼實現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10