当前位置：首页 > news >正文

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

news 2025/8/15 16:43:21

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，否则会报错！)

查看全文

http://www.lryc.cn/news/274927.html