应用基于三元运算符的内联样式背景图像

Question

如何申请：

<div v-bind:style="{ 'background-image': 'url(' + item.packageAtGradeImage.url + ')' }"></div>

但仅当item.packageAtGradeImage.url！= null

？

Answer 1

只需添加计算属性并将其绑定到style，即可使模板更简洁：

  computed: {
      styles() {
          if (!this.item.packageAtGradeImage.url) {
              return null;
          }
          return { 'background-image': 'url(' + this.item.packageAtGradeImage.url + ')' };
      }
  }

在模板中：

<div :style="styles"></div>