vue绑定背景颜色或背景图片 和 nuxtjs动态设置background-image：

2024-01-03 16:32:10

v-bind绑定样式表：
----------------------------------------------------------------------------------------------------

HTML写法:
<div class="myItem" style="text-align:center; background-image:url(''); background-size:auto 100% ;background-position:center; background-repeat:no-repeat;" >

v-bind绑定style写法(里面是个json)：?
<div class="myItem" :index="index" ?:style="{'text-align':'center','background-image':'url('+item.photo+')','background-size':'auto 100%','background-position':'center','background-repeat':'no-repeat'}" ?>

<div class="box" :style="{width:width,height:height,backgroundColor:backgroundColor}"></div>

nuxtjs动态设置background-image：

? <div :style="{backgroundImage: `url(` + require(`~/assets/ProjectPictures/${this.background}`) + `)`}">

nuxt绑定内联样式 :style="{'title':'里面必须标准的json'}" ? 里面必须是标准的json格式否则出错
-------------------------------------------------------------------------- ?
?? ?<div style="float:left;width:27.18%;height:14.2vw; border:1px solid #ccc;background-size:100% 100%;"??:style="{'background-image':'url(\''+require('@/assets/images/index/advantage1.png')+'\')'}"??>
?? ??? ?<nuxt-link to="/freeCoupons" style="display: flex; margin:9vw 2vw auto auto; align-items:center; width: 20vw;border:0px solid #ccc;color:#999;font-size: 10pt;font-weight:bold; line-height:2;" >? test?? </nuxt-link>
?? ?</div> ?

(注意：:style后面是个json，否则会报错！)????

文章来源:https://blog.csdn.net/happyzhlb/article/details/135366408
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。