Question

我有一个VueJS组件，其目标是样式attr：

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

...

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

现在，这完全按照我的意愿工作（如果用户输入图片网址，则包含样式attr，如果他/她没有，则包括样式attr。

然而，我的理解是它更好＆＃39; （通常）将我的逻辑分成一个方法，而不是将它包含在：style指令中。

现在，我对VueJS相当陌生，并且没有强大的JavaScript后端，我正在试图弄清楚如何做到这一点，但是还没有。

因此，我想知道是否有人可以告诉我如何编写方法（或其他一些推荐的最佳实践）来实现相同的结果。

感谢。

Answer 1

在这种情况下，你真的不需要一个方法，你可以简单地使用一个计算属性。

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

并在模板中使用它：

<section :style="sectionStyle">

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

Answer 2

@Bert回答让我走上正轨，但由于某种原因，它没有按预期工作。我略微修改了它然后一切正常。这是我的修改：

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

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

2 个答案: