Question

我在这里做错了什么？（文字对象表示法和点表示法可能与我的问题无关。这只是我的实验）。

<template lang="pug">
- var medium_large = "obj.better_featured_image.media_details.sizes.medium_large.source_url";
- var literalMedium = "obj['better_featured_image']['media_details']['sizes']['medium']['source_url']"

#app
  div(v-for='(obj) in posts' :key='obj.index')

    // WORKS
    p {{obj.better_featured_image.id}}
    // out: 224

    // WORKS: - because of vue bind shorthand ":" :
    .feature(:src=literalMedium)
    .feature(:src=medium)
    // out: <div data-v-ab895722="" src="/app/uploads/2018/06/9f6c2fdb-de2a-3351-b105-bd158ea6c890-300x150.jpg" class="feature"></div>

    //ERROR  jshint: "unexpected token obj", (also tried without binding :style) atribute
    .feature(:style='background-image:url('+ {{obj.better_featured_image.source_url}} +');')
    .feature(:style='background-image:url('+ obj.better_featured_image.source_url +');')

</template>`

Answer 1

您可以使用返回带有背景图像属性的样式对象的函数。虽然不知道它如何与您正在使用的哈巴狗一起玩。

<template>
  <div :style="createUrl(obj.source_url)"></div>
</template>

<script>
...
  methods: {
    createUrl: function(url) {
      return {
        'background-image': 'url(' + url + ')',
        width: '1000px',
        height: '1000px'
      }
    }
  },
}
</script>

样式属性表达式值未评估，但src属性已评估？

1 个答案: