首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue动态绑定行内样式style的backgroundImage

vue实现动态绑定行内样式style的backgroundImage

2024-07-26 14:19:57 作者：CoderLonely

这篇文章主要介绍了vue实现动态绑定行内样式style的backgroundImage方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue动态绑定行内样式style的backgroundImage

最近遇到这个问题：在网上找了找

比如我有很多张图片，想v-for时在每一个div上添加一个随机的背景图片，实现如下效果：

有两点需要注意：

一是文件路径不能直接使用，而要使用require
二是去拼接“url(文件路径)”，还需要注意要对style进行数据绑定

<div  v-for="item in items" :key="item.id"
   :style="{backgroundImage:'url('+bgimgs[random()].img+')'}">
  </div>

data(){
    return {
	  //用于随机生成背景图片的文件路径列表
      bgimgs:[
        {img:require("../assets/imgs/background_imgs/1.png")},
        {img:require("../assets/imgs/background_imgs/2.png")},
        {img:require("../assets/imgs/background_imgs/3.png")},
        {img:require("../assets/imgs/background_imgs/4.png")},
        {img:require("../assets/imgs/background_imgs/5.jpg")},
        {img:require("../assets/imgs/background_imgs/6.jpg")},
        {img:require("../assets/imgs/background_imgs/7.jpg")},
        {img:require("../assets/imgs/background_imgs/8.jpg")},
    	 ]
    }
  }

style background变量vue

style的background设置变量

:style="{background: (index+1)==actBar?'url(img/'+item.num+'_active.png) no-repeat':'url(img/'+item.num+'.png) no-repeat'}"

:style="'background-image: url(' + item.appface+')'"

:style="'background-image: url('+'img/level/ml/'+girlCharm(item.level)+'.png'+')'"

:style="'background-image: url('+'/static/img/'+item.domainBg+'.png'+')'">

img的src设置变量

:src="'img/act1_'+dataList.sex+'rule.png'"

style的width设置变量

:style="{width: giftLen + '%'}"

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。