常用快捷方法 -- html
1、数据延迟及渲染延迟
nextTick(dom全部渲染完成后执行,通常用与延迟加载) mounted(){ this.init() //先加载 this.$nextTick(()=>{ this.afterInit() //后加载 }) } 2、setTimeout(多长时间后执行) mounted(){ this.init() //先加载 this.setTimeout(()=>{ this.afterInit() //后加载 },0) }
2、element input 只输入数字
<el-input size="mini" oninput ="value=value.replace(/[^0-9.]/g,'')" v-model="xxx"/>
3、初始化页面闪动
1、css样式增加v-cloak -- 单个dom [v-cloak]{ display:none } <div v-cloak>{{message}}</div> 2、根目录进行绑定 -- 全局 <div style="display:none;" :style="{display: 'block'}"></div> vue在渲染之前,style="display: none;"让页面不显示 vue渲染完成了,:style="display: block;"让页面显示
4、table前端假分页
<el-table v-loading="listLoading" :data="caseInfoList.slice((currentPage-1)*pagesize,currentPage*pagesize)" > </el-table> // 切换每页条数时 handleSizeChange(size) { this.pagesize = size; console.log(this.pagesize)//每页下拉显示数据 } // 切换当前页码时 handleCurrentChange(currentPage) { this.currentPage = currentPage; console.log(this.currentPage) //点击第几页 }