前端常用基础知识

110 阅读1分钟

1.复制链接:

var aux = document.createElement('input')
aux.setAttribute('value', rows.link)
document.body.appendChild(aux)
aux.select()
document.execCommand('copy')
document.body.removeChild(aux)
this.$message({
message: '复制成功',
type: 'success'
})

2.vue光标聚集:

this.$refs.username.focus();


3.v-if和v-for一起用computed:(v-for比v-if优先级高)

v-for = "user in users" v-if = "user.isActive" 
写成computed:{
activeUser() { return this.users.filter(function (user) {
return user.isActive; }) }}
html:v-for = "user in activeUser" 

4.时间小于两位数补0:

time.toString().padStart(2,0);
padStart()用于头部补全,padEnd()用于尾部补全

5.数组取随机数

function arrayRandomValue(array,start=1,end){
            end=end?end:array.length;
            stat--;
            const index=start+Math.floor(Math.random()*(end-start);
            return array[index]
        }
let arr =['李四''王五''赵六']

6.vue中过滤器的运用

ps:在工作中很多时候一个过滤器就能解决很多效果,比如时间的问题等等;分为全局(filter)和局部(filters)的过滤器;
全局的是filter,局部的是filters,当两个过滤器名称相同时,使用局部的过滤器

//全局
Vue.filter('timeVal', function (value) {
  if (!value) return ''  
  let data = new Date(value);  
  return `${data.getFullYear()}/${(data.getMonth()+1).toString().padStart(2,0)}/${(data.getDate()).toString().padStart(2,0)}`
  //返回年/月/日
});

局部

//vue template中 在双花括号中 -
<div>{{ time | timeVal }}</div>
//js中
filters:{
    timeVal(value){
    if (!value) return ''  
  let data = new Date(value);  
      return `年/月/日`
    }
}