溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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)
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
