vue项目切换用户头像的写法

vue项目切换用户头像的写法

vue程序的头像的切换，今天别人给我讲了下我今天来试了一下还不错，进行总结

首先是找清楚需要用的接口

1，https://www.365msmk.com/api/app/public/img向服务器上传图片

2，https://www.365msmk.com/api/app/user 把服务器图片上传到头像

就这两个就行了

接下来就是步骤的实现

主要用到的其实是表单输入中的file

**

vue路由传值

vue的路由传值有两种方式

params

this.$router.push({
  path:"/地址",
  params:{
    参数名:"参数值"
  }
})
接受
this.$route.params."参数值"
12345678

params的话传参刷新页面数据会消失不会保存

query

this.$router.push({
  path:"/地址",
  params:{
    参数名:"参数值"
  }
})

接受
this.$route.query."参数值"
123456789

query的话刷新页面数据也不会丢失

flex 最后一行左对齐

最近项目布局上要求item两端对齐，而且最后一行在列不满的情况下要求左对齐，使用flex的**justify-content: space-between;**实现时发现最后一行不能左对齐，而是两端对齐方式，下图不是项目上想要的效果（不使用flex也可以实现，本文仅讨论使用flex实现）

felx最后一行对齐的话可以用空白div来填充

还可以用：:after（适用于每行列数确定的场景）

.box:after {
    content: "";
    flex: auto;
 }

Js数组中常用的方法

push()

像数组的末尾添加，返回的是添加后的数组的长度，会改变原来的数组

var a = [a]
var b= a.push(b)

结果：[a,b]

pop()

删除数组尾部的元素，改变原来数组

var a = [a,b]
var b= a.pop()

结果：[a]

unshift()

数组前添加一个元素，改变原来数组

var a = [a]
var b= a.unshift(b)

结果：[b,a]

shift()

删除数组中的首个元素，改变原来数组

var a = [a,b]
var b= a.shift()

结果：[b]

splice()

方法用于添加或删除数组中的元素，改变原来的数组

var a = [a,b]
var b= a.splice(0,1)
从0开始删除一个
结果：[b]

var a = [a,b]
var b= a.splice(0,1,c,d)
移出a,并且添加c,d
结果：[b,c,d]