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

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

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

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

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

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前面不需要加冒号),可以用一个数组来实现:

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

绑定单组样式
绑定多组样式

你可能感兴趣的:(前端,vue.js,前端,javascript)