Javascript 在Vue组件中将逻辑从指令移动到方法

我有一个针对style attr的VueJS组件，如下所示：

<section :style="{ backgroundImage: src && 'url(' + src + ')' }">

...

<script>
  export default {
    props: ['src']
  }
</script>

现在，这正是我所希望的。如果用户输入图像url，它将包含样式属性，如果用户不输入，则不包含样式属性

然而，我的理解是，通常将我的逻辑分离到一个方法中比将其包含在：style指令中更好

现在，我对VueJS还比较陌生，没有强大的JavaScript后台，我正试图找出如何做到这一点，但一直无法做到

因此，我想知道是否有人可以告诉我如何编写一个方法或其他推荐的最佳实践来达到同样的效果

---

谢谢。

在这种情况下，您实际上不需要方法，只需使用计算属性即可

computed:{
  sectionStyle(){
    return {
      backgroundImage: this.src && `url(${this.src})`
    }
  }
}

并在模板中使用它，如下所示：

<section :style="sectionStyle">

---

如果你有决定样式的参数，你可以使用一个方法，就像你在循环中一样。

@Bert answer让我走上了正确的轨道，但由于某些原因，它没有按预期工作。我稍微修改了一下，然后一切正常。这是我的修改：

<section :style="bgSrc">
...
<script>
  export default {
    props: ['src'],
    computed: {
      bgSrc () {
        if (this.src) {
          return { backgroundImage: 'url(' + this.src + ')' }
        }
      }
    }
  }
</script>