VUE實(shí)現(xiàn)自身整體組件銷毀的示例代碼
V-IF實(shí)現(xiàn)組件自身銷毀
前面說了一些自己怎么思考得來,如果時(shí)間急可直接看
最后~~~~
通知提示組件案例分析
在編寫一些簡單的通知組件案例中,可能會(huì)這樣去寫
//在[index.js]的install方法里
setTimeOut(()=>{
document.body.removeChild([DOM])
, timer}
//定時(shí)的移除DOM
再看另一個(gè)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!!!')
},
}
看完上一個(gè)聯(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)
}
}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
用Vue.js實(shí)現(xiàn)監(jiān)聽屬性的變化
響應(yīng)系統(tǒng)是Vue.js的一個(gè)顯著功能,修改屬性,可以更新視圖,這讓狀態(tài)管理變得非常簡單且直觀。這篇文章主要給大家介紹如何利用Vue.js實(shí)現(xiàn)觀察屬性的變化,有需要的朋友們可以參考借鑒,感興趣的朋友們下面來一起看看吧。2016-11-11
vue+element-ui+axios多文件上傳的實(shí)現(xiàn)并顯示整體進(jìn)度
這篇文章主要介紹了vue+element-ui+axios多文件上傳的實(shí)現(xiàn)并顯示整體進(jìn)度,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
Vue+Element UI+vue-quill-editor富文本編輯器及插入圖片自定義
這篇文章主要為大家詳細(xì)介紹了Vue+Element UI+vue-quill-editor富文本編輯器及插入圖片自定義,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-08-08
Vue源碼解析之?dāng)?shù)據(jù)響應(yīng)系統(tǒng)的使用
這篇文章主要介紹了Vue源碼解析之?dāng)?shù)據(jù)響應(yīng)系統(tǒng)的使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Create?vite理解Vite項(xiàng)目創(chuàng)建流程及代碼實(shí)現(xiàn)
這篇文章主要為大家介紹了Create?vite理解Vite項(xiàng)目創(chuàng)建流程及代碼實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10
vue實(shí)現(xiàn)百度搜索下拉提示功能實(shí)例
這篇文章主要介紹了vue實(shí)現(xiàn)百度搜索下拉提示功能實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06
Vue版本vue2.9.6升級到vue3.0的詳細(xì)步驟
vue版本升級相信大家應(yīng)該都遇到過,下面這篇文章主要給大家介紹了關(guān)于Vue版本vue2.9.6升級到vue3.0的詳細(xì)步驟,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
Vue前端如何實(shí)現(xiàn)與后端進(jìn)行數(shù)據(jù)交互
這篇文章主要介紹了Vue前端如何實(shí)現(xiàn)與后端進(jìn)行數(shù)據(jù)交互,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03

