总结vue实际开发过程中用到的知识点（持续更新）

KimihaSukiDa

已于 2022-01-26 11:29:58 修改

阅读量1.7k

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript

于 2021-11-10 15:52:48 首次发布

本文链接：https://blog.csdn.net/weixin_40841243/article/details/121249700

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

引言

开始接触前端vue技术了，实际开发过程中也遇见了各种各样的小问题，用此文记录遇见的问题和解决方式。

做查询订单信息的工具，想根据接口返回的数组值，动态生成列表，效果类似如图

解决：内使用 v-for 遍历接口返回的数组
接口返回值有些字段过长，一行3个影响视觉效果，所以打算吧接口返回值的值很长的key先删除掉，最后单独按一行一个显示

解决：有2个思路
a. 使用computed处理数据，delete删除key

b.使用 v-if，利用indexOf函数，判断不是该key的时候渲染
使用el-descriptions组件，单独处理长值时，key的返回值过长了，导致超出屏幕外，不是特别长的时候会自动换行

解决：用div包一层，加style属性break-all，会使el-descriptions内的文本自动换行
单出处理的key有的长有的短，导致长的折行就很丑

解决：el-description组件使用labelClassName属性定义一个class，统一加一个样式，固定一个宽度
单独处理的key再没请求后端时就渲染了，期望点击按钮调用接口后再渲染

解决：使用v-show，在后端返回有值后显示，即当该值当key数量大于0的时候
同步请求接口后，在执行后面逻辑
使用async…await 将异步请求接口变为同步请求完成后在执行后续逻辑
利用v-show=‘表达式’方式来判断组建显示条件
使用scope.row操作表单的单行数据，row值为列表中的单个对象值
处理数据，

  数组后面添加元素  a = []， a.push() 
  数组前面添加元素 a.unshift()
  字符串截取 a=''，a.substring(0,2)
  字符串分割 a=‘’，a.split('/')
  查找数组索引 a=[]，a.findIndex（（item） => item.属性 === ' '）
  数组转字符串：a=[]，a.toString()

时间戳转换

formatDate(timestamp) {
      let date = new Date(timestamp * 1000) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      const s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return Y + M + D + h + m + s
    },

间隔时间，类似php的sleep函数，同步调用

sleep(numberMillis) {
      return new Promise((resolve => {
        setTimeout(() => resolve(), numberMillis)
      }))
    },
 async deployService(rowData) {
      rowData.isProcess = true
      rowData.percent = 0
      while (!rowData.isDone) {
        await this.sleep(this.deployCost)
        rowData.percent = rowData.percent + 10
}