如何v绑定背景?

时间:2017-02-10 15:53:37

标签: vue.js

我试图做这样的事情:

    SELECT
      f.pending
      , f.title
      , f.funeraltype
      , f.firstname
      , f.middlename
      , f.lastname
      , f.suffix
      , f.displayage
      , f.age
      , f.displaycity
      , f.city
      , f.displaydate
      , f.date
      , f.aftersunset
      , f.funeraldate
      , f.displayfuneraldate
      , f.ftime
      , f.displayservicelocation
      , l.location
      , f.displaycemetery
      , c.name
      , f.displayobituary
      , f.obituary
      , f.displaycharity1
      , ch1.name
      , ch2.name
      , ch3.name
      , ch4.name
      , ch5.name
      , f.charity1memo
      , f.displaycharity2
      , f.charity2
      , f.charity2memo
      , f.displaycharity3
      , f.charity3
      , f.charity3memo
      , f.displaycharity4
      , f.charity4
      , f.charity4memo
      , f.displaycharity5
      , f.charity5
      , f.charity5memo
      , f.memorialbook
      , f.displayshiva
      , f.displaytime
      , f.shivaendpart
      , f.shivauntil
      , f.shivaatresidence
      , f.shivaname
      , f.shivaaddress
      , f.shivacity
      , f.shivastate
      , f.shivazip
      , f.shivaphone
      , f.shivacomment
      , f.displayfamilymembers
      , f.familymembers
      , f.displayclergy
      , f.clergy
      , f.livevideo
      , f.archivevideo
      , f.video
      , f.usemp4video
      , f.mp4video
      , f.custom_text
      , f.charities_footnote
      , f.charity1note
      , f.charity2note
      , f.charity3note
      , f.charity4note
      , f.charity5note
FROM funerals f
INNER JOIN  locations l on f.servicelocation = l.locationid 
INNER JOIN cemeteries c ON f.cemetery = c.cemeteryID 
INNER JOIN charities ch1 ON f.charity1 = ch1.CharityID
INNER JOIN charities ch2 ON f.charity2 = ch2.CharityID
INNER JOIN charities ch3 ON f.charity3 = ch3.CharityID
INNER JOIN charities ch4 ON f.charity4 = ch4.CharityID
INNER JOIN charities ch5 ON f.charity5 = ch5.CharityID

但是我收到了这个错误:

  

表达式无效。生成的函数体:{background:scope.url('   + user_credentials.avatar +'); scope.background-scope.size:scope.cover!scope.important; scope.display:scope.block;}

有什么建议吗?

像这样它工作,但我想像背景图像一样使用它:

<div class="seller_image" :style="{background: url(' + user_credentials.avatar +'); background-size: cover !important; display:block;}">

2 个答案:

答案 0 :(得分:2)

将它们放在计算机内更容易,并使用它代替:

new Vue({
  el: '#app',
  computed: {
    getBackground() {
      return 'background: url(' + this.user_credentials.avatar + '); background-size: cover display:block;';
    }
  },
  data: {
    user_credentials: {
      avatar: 'avatar.png'
    }
  }
})

然后你可以像这样使用它:

<div :style="getBackground"></div>

这是JSFiddle:

https://jsfiddle.net/w6agzuen/

答案 1 :(得分:1)

您获得的错误是因为您需要将jms.location=failover:(tcp://localhost:61616)?reconnectDelayExponent=2.0&useExponentialBackOff=true&initialReconnectDelay=30&maxReconnectAttempts=0值作为字符串。任何其他内联样式也需要以逗号分隔,因为您传递的是对象。最后我认为像background这样的包含连字符的样式在绑定它们时需要是驼峰式的,所以对内联样式的最终更改应如下所示:

background-size