VUE实现自身整体组件销毁的示例代码
程序员文章站
2022-06-22 14:23:15
v-if实现组件自身销毁
前面说了一些自己怎么思考得来,如果时间急可直接看
最后~~~~
通知提示组件案例分析
在编写一些简单的通知组件案例中,可能会这样去写...
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) } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 我国人工智能相关临床研究数量全球第一 今年新增48个
下一篇: 蔊菜怎么吃好吃呢