template>
 <div id="playPage" class="blur" v-bind:style="{backgroundImage: 'url(' + albumpic_big + ')'}">
 <!  --       {{albumpic_big}}-->
 <div class="header">
 <ul>
 <li class="icon">
 <img src="../img/unfold.svg">
 </li>
 <li class="songName">
 {{songName}}
 </li>
 <li class="icon">
 <img src="../img/more.svg">
 </li>
 </ul>
 </div>
 <p>-{{singer}}-</p>
 </div>
 </template>
 
 #playPage{
 width: 100%;
 height: 100%;
 position: relative;
 }
 #playPage.blur{
 position: absolute;
 top: 0;
 left: 0;
 background-size:cover;
 filter: blur(8px)
 }
 #playPage:before{
 content: '';
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 filter: blur(7px);
 z-index: -1;
 }

In the past, I wrote pseudo elements directly and set the background map on pseudo elements, but because the bound data cannot be written in css, I don’t know what to do.