在样式属性中使用组件变量答案

【问题标题】：Use component variable in style attribute在样式属性中使用组件变量
【发布时间】：2018-09-27 03:47:33
【问题描述】：

我试图在属性style 中使用组件变量，但这样做时会出现编译错误。这里有什么问题？

模块构建失败：SyntaxError: Unexpected token (1:427)

<template>
<div>
    <!-- THe below is valid -->
    <img v-bind:src="$IMG_PATH + '/carousel1.jpeg'"/>

    <!-- The below wont compile: has syntax errors? -->
    <p v-bind:style="background-image: url('$IMG_PATH + \'/carousel1.jpeg\''));">Foo</p>
</div>
</template>

<script>

Vue.prototype.$IMG_PATH = './foo/img'

export default {
    ...
}
</script>
</style>

【问题讨论】：

从 CSS 方面看，应该是 backgrond-image: url() ，而不是 background-image(url())
@Vucko 感谢这是问题的一部分，但我仍然遇到编译器错误。

标签： vue.js vue-component

【解决方案1】：

你使用v-bind:style错了，使用：

<p v-bind:style="{ backgroundImage: 'url(' + $IMG_PATH + '/carousel1.jpeg)' }"></p>

例子：

Vue.prototype.$IMG_PATH = 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/701'

new Vue({
  el: "#app"
})

p {
  height: 300px;
}

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <p v-bind:style="{ backgroundImage: 'url(' + $IMG_PATH + '/beer-main-0-1496757601.jpg)' }">foobar</p>
</div>

【讨论】：