vue2如何在字符串里解析變量

<div :class="'rank'+(key+1) + ' clear'" v-for="(item,key) in res.rank">
    <div class="icon fl">
        <img v-bind:src="'__STATIC_URL__images/app4.0/top' + (key+1) + '.png'"/>
    </div>
    <div class="top fl">
        <p v-text="item.user_id"></p>
        <p>第{{key+1}}名</p>
    </div>
</div>

 

//解析后的DOM結構

<div class="rank1 clear">
    <div class="icon fl">
        <img src="__STATIC_URL__images/app4.0/top1.png"/>
    </div>
    <div class="top fl">
        <p>zx****98</p>
        <p>第1名</p>
    </div>
</div>
<div class="rank2 clear">
    <div class="icon fl">
        <img src="__STATIC_URL__images/app4.0/top2.png"/>
    </div>
    <div class="top fl">
        <p>zx****98</p>
        <p>第2名</p>
    </div>
</div>

<div class="rank3 clear">
    <div class="icon fl">
        <img src="__STATIC_URL__images/app4.0/top3.png"/>
    </div>
    <div class="top fl">
        <p>zx****98</p>
        <p>第3名</p>
    </div>
</div>