Vue前端开发中经常遇到的问题

浅浅记录一下自己近期在前端开发过程当中使用的干货，如有不妥之处还请各位大佬指正！

1.图片宽高自适应问题。在项目中有时候会遇到必须给图片设置宽高的情况，但同时又想让宽高自适应，并且保持宽高比，那么可以在css当中这样写（我这里是less的写法）：

  @baseWidth:1920px;
  .pxfix(@w){
      width:(@w/@baseWidth)*100vw;
  }
  .img{
    .pxfix(1500);
  }

2.在使用图片时，经常要写成动态路径，并且拼接上变量，那么图片路径可以这样写：

<img :src="require(`../../assets/${msgIcon}.png`)" alt="">

3.对象的遍历可以这样写（这里是遍历对象的properties属性，然后将值为空的项赋值为--）：

Object.keys(item.properties).forEach((key) => {
    if (item.properties[key] === null) {
        item.properties[key] = '--';
    }
});

4.使用v-model绑定数据时，如果要结合v-for一起用，那么v-model也需要写成动态的（注意：v-model前面不需要加冒号），可以用一个数组来实现：

<input v-for="(item,index) in arr" :key="index" v-model="bind[index]"/>

5.如果一个元素需要根据情况判断具体的样式，那么我们可以用动态样式绑定（绑定单组样式用三目运算符，绑定多组样式用对象的写法）：

<div :class="activeIndex===index?'active':'no-active'">绑定单组样式</div>

<div class="card" :class="{'active':activeIndex===index,'bgCard1':index===0}">
    绑定多组样式
<div>