在style属性中使用component变量

Question

我试图在属性become: true中使用组件变量，但是当我这样做时，我遇到了编译错误。这里有什么问题？

  

模块构建失败：SyntaxError：意外的令牌（1：427）

id | content 

100 | <?xml version="1.0" encoding="utf-8"?><RepeaterData><Version /><Items><Item><Years>2018</Years><data>110</data></Item><Item><Years >2019</Years><data>200</data></Item></Items></RepeaterData>

Answer 1

您使用v-bind:style错误，请使用：

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

示例：

＆＃13;

＆＃13;

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

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

＆＃13;

p {
  height: 300px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;