1、求数组最大、最小值
const arr = [0,1,2,3,4,5,6]
const max/min = Math.max/min(...arr) //使用...结构 Math函数求值
2、数组排序
const arr = [0,1,2,3,4,5,6]
const data=JSON.parse(JSON.stringify(arr)).sort(this.down(param))//对数据进行排序--从大到小--根据某个属性
//数据排序的方法
down (name) {
return function (obj1, obj2) {
let val1 = obj1[name]
let val2 = obj2[name]
return val2 - val1
}
},
3、数组内容判断some(数组中有值与条件相符就返回true)、every(数组中所有值与条件相符返回true)
some:数组中有值与条件相符就返回true,every:数组中所有值与条件相符返回true
const arr = [0,10,12,13,14,15]
arr.some(item=>item>10) // true
arr.every(item=>item>10) // false
4、数据延迟及渲染延迟
1、nextTick(dom全部渲染完成后执行,通常用与延迟加载)
mounted(){
this.init() //先加载
this.$nextTick(()=>{
this.afterInit() //后加载
})
}
2、setTimeout(多长时间后执行)
mounted(){
this.init() //先加载
this.setTimeout(()=>{
this.afterInit() //后加载
},0)
}
5、初始化页面闪动
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;"让页面显示
6、时间差计算
function difference (beginTime, endTime) {
const dateBegin =new Date(beginTime);
const dateEnd =new Date(endTime);
const dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
//计算出相差天数
const dayDiff=Math.floor(dateDiff /(24 *3600 *1000))
const leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
const hours=Math.floor(leave1/(3600*1000))//计算出小时数
//计算相差分钟数
const leave2=leave1%(3600*1000) //计算小时数后剩余的毫秒数
const minutes=Math.floor(leave2/(60*1000))//计算相差分钟数
//计算相差秒数
const leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
const seconds=Math.round(leave3/1000)
return ; //可直接返回变量名,vue中变量名会自动转换为属性名 -- {'dayDiff':dayDiff}
}
7、// 获取当前时间，特定时间前的日期
function getBeforeDate(n) { // n 往前翻的天数
var n = n;
var d =new Date();
var year = d.getFullYear();
var mon = d.getMonth() +1;
var day = d.getDate();
if(day <= n) {
if(mon >1) {
mon = mon -1;
} else {
year = year -1;
mon =12;
}
}
d.setDate(d.getDate() - n);
year = d.getFullYear();
mon = d.getMonth() +1;
day = d.getDate();
s = year +"-" +(mon <10 ?('0' + mon) : mon) +"-" +(day <10 ?('0' + day) : day);
return s;
}
8、控制显示字数超出部分...代替
function ellipsis(value, num=5){
const nums = num;// 设置限定字数,默认为5
console.log('nums',nums)
if (!value) return '';
if (value.length > nums) {
return value.slice(0, nums) +'...';
}
return value
}
9、数据转换（千分位符，小数点)
function getFlot(val) {
if (val !==undefined) {
return parseFloat(val).toFixed(0).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
} else {
return ''
}
}
10、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) //点击第几页
}
