vue动态渲染背景及注意事项

*图片名字不能有空格与括号，

 

需实现效果：

方法：

1.字符串模板：（不是实现上图的，可参考写法）

 1  <ul class="two_tab">
 2               <li
 3                 @click="twoTabStatus(two)"
 4                 v-for="(items,two) in twoTab"
 5                 :class="two==twoStatus?'two_li_active':''"
 6                 :style="{background:(two==twoStatus?`url(${items.activeBgImg})no-repeat center center`:`url(${items.bgImg})no-repeat center center`)}"
 7               >
 8                 <p>{{$t(`${items.name}`)}}</p>
 9                 <p style="transform: scale(0.85);text-shadow:none">{{$t(`${items.time}`)}}</p>
10               </li>
11             </ul>

2.原始方式（预防不支持第一种）：

 <ul class="progress_bar">
                    <li v-for="progressBars in progressBars">
                    <div class="title">{{$t(`${progressBars.name}`)}}</div>
                    <div class="progress"  :style="{'background':'url('+progressBars.img+')no-repeat left center','background-size':'contain'}">
                        <!-- <img :src="progressBars.img" alt=""> -->
                        <span v-if="progressBars.value">{{$t(`${progressBars.value}`)}}</span>
                    </div>
                    </li>
                </ul>

 

posted @ 2022-09-15 17:42  CMirs  阅读(205)  评论(0)    收藏  举报