vue的style方式绑定行内样式-background-image的方式等~

需求：图片是通过接口获取可以配置，同时图片要自适应容器的大小，这时的解决方法是设置图片为背景图并居中排布。

 

<view class="giftImg" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }"></view>

 行内样式的写法可以使用数组语法也可以使用对象语法：

1.数组语法：

// :style 的数组语法可以将多个样式对象应用到同一个元素上：
data: {
  baseStyles: {
    color: 'red',
    fontSize: '13px'
  },
  overridingStyles: {
    display:flex;
    align-items: center;
  }

}
<div :style="[baseStyles, overridingStyles]"></div>

2.对象语法：

// 记得用引号括起来

data: {
  activeColor: 'red',
  fontSize: 30
}
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

所以添加动态的背景图片或者设置其他的行内样式可以采用以下的写法：

<div :style="{backgroundImage:'url(' + item.videopic + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center center', backgroundSize: 'contain'}"></div>