javascript - 在 Vue 组件中将逻辑从指令转移到方法

Question

我有一个针对样式属性的 VueJS 组件，如下所示:

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

...

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

现在，这完全按照我希望的方式工作(如果用户输入图像网址，它包括样式属性，如果他/她不输入，则不包括它。

但是，我的理解是(一般来说)将我的逻辑分离到一个方法中比将其包含在 :style 指令中“更好”。

现在，我对 VueJS 还很陌生，没有强大的 JavaScript 背景，我正在尝试找出如何做到这一点，但一直没能做到。

因此，我想知道是否有人可以向我展示如何编写一种方法(或其他推荐的最佳实践)来实现相同的结果。

谢谢。

Answer 1

在这种情况下，您实际上并不需要方法，您可以简单地使用计算属性。

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

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

<section :style="sectionStyle">

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