vue组件模板引用背景图片

最新推荐文章于 2024-06-26 09:45:35 发布

随忆~

最新推荐文章于 2024-06-26 09:45:35 发布

阅读量1.7k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/suiyijiang/article/details/109866489

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue组件模板引用背景图片

// 在模板中设置背景图片时，由于样式中的  <div style="background-image: url();"></div> ，所以需要使用{将样式放在里面}
Vue.component("content-item",{
    template: `
    <li class="content-item">
        <div :style="{backgroundImage: 'url('+dataList.url+')'}"></div>
        <h4>{{dataList.name}}</h4>
        <span>by Apple Music</span>
    </li>
    `,
    data() {
        return {
            dataList: {
            	url:'',
            	name: '',
			},
        }
    },
});