项目需求:首页有一张中国地图,点击地图中不同的省份进入省份详情模式,此详情页面包含一张当前省份特定的背景图片,此页面的路由为/provinceId/9, 其中数字部分表示当前省份的ID, 图片路径位置为src/assets/images/pic1,pic2,pic3,…等,pic后面的数字与省份的ID一一对应, 效果如下图所示
HTML部分
<template>
<div class="province-detail" :style="styleObject">
<h1></h1>
</div>
</template>
JS部分
data() {
return {
styleObject: {
backgroundImage:
"url(" + require(`../assets/images/pic${this.$route.params.provinceId}.jpg`) + ")"
}
};
}
关键知识点总结
vue支持绑定style到对象上,这样可避免臃肿的html结构, 如
:style="styleObject" && styleObject = { }
url()里的路径务必使用require来引入, 否则可能会出现找到背景图片的情况. 如下所示:
backgroundImage: "url(" + require(`../assets/images/pic${this.$route.params.provinceId}.jpg`) + ")"