前端常见问题小技巧

1.如何判断对象是否为空？

不能用 if (obj){  } 来判断，因为无论对象里是否有东西，判断结果都是false。最简单的方法是ES6 Object.keys(obj).length

 

2.Vue事件对象传参

在需要使用事件对象的地方传入$event，如 @click="add($event,item)"

 

3.动态判断修改class名

<div :class=" {num1: index == 0,num2: index == 1,num3: index == 2}"></div>

 

4.去掉a标签的默认样式

a:active{
	background-color: transparent;
}
a:hover{
    -webkit-tap-highlight-color: transparent;
}

这样就可以在a标签点击的时候不出现那个淡蓝色的背景颜色

 

5.JS时间戳转日期

function timestampToTime(timestamp,type) {
    var date = new Date(timestamp)    //时间戳为10位需*1000，时间戳为13位的话不需乘1000
    var Y = date.getFullYear()
    var M = '-' + (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
    var D = '-' + ( date.getDate() < 10 ? '0' + date.getDate() : date.getDate() )
    var h = '  ' + ( date.getHours() < 10 ? '0' + date.getHours() : date.getHours() )
    var m = ':' + ( date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() )
    var s = ':' + ( date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds() )
	var dateType = type || 'sec'
    if(dateType =='month'){
        return Y + M    //年月
    }else if(dateType =='day'){
        return Y + M + D    //年月日
    }else if(dateType =='min'){
        return Y + M + D + h + m    //年月日时分
    }else if(dateType =='sec' || type == ''){
        return Y + M + D + h + m + s    //年月日时分秒
    }
}

timestampToTime(new Date().getTime(),'min') //获取当前时间

6.HTML页面实时预览

npm install -g browser-sync

browser-sync start --server --files " **/*.css, **/*.html ,**/*.js "

 

7.CSS超出两行隐藏

p{
    overflow: hidden;
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

8.v-if三元表达式

<div v-if="imgLen>=1 ? false : true"></div>

9.限定长度的数字正则

<div class="col-sm-9">
    <input type = "text" v-model = "pfincome" οnkeyup="value=value.replace(/[^\d]/g,'') " ng-pattern="/[^a-zA-Z]/" maxlength=11 >     
</div>