Vue.js如何设置：id前缀字符串？

我在一个vue社区中发现了这个示例，但在我的情况下，我希望我的“id”有一个前缀，而不仅仅是一个数字

---

也就是说，如果索引为1，我希望

而不是

，代码应该是自解释的：

class="tab-title" 
v-on:click="tab" 
v-for="(tabTitle,index) in tabTitleList"
:id="index"

{{tabTitle}}

---

文档。

如果您有一个唯一的id，请执行以下操作：

<div v-for="(tabTitle, index) in tabTitleList">
    <span :id="'sp_' + index"> {{tabTitle}} </span>
</div>

<ul>
    <li v-for="(item , index) in ritems" :id="['Row_' + index]">
        {{something}}
    </li>
</ul>

如果您没有唯一的id，请执行此操作

<ul>
    <li v-for="item in ritems" :id="['Row_' + item.id]">
        {{something}}
    </li>
</ul>

{{something}}

在这两种情况下，结果如下：

<div v-for="(tabTitle, index) in tabTitleList">
    <span :id="'sp_' + index"> {{tabTitle}} </span>
</div>

<ul>
    <li v-for="(item , index) in ritems" :id="['Row_' + index]">
        {{something}}
    </li>
</ul>

某物

用后缀和前缀字符串动态html属性（如：id、：class等）的最佳方法

前缀

在vue变量前面的前缀字符串中使用连接符号“+”作为单引号。 例如

：id=“'prefix\u string\u'+index”

：class=“'prefix\u string\u'+class”

<div v-for="(tabTitle, index) in tabTitleList">
    <span :id="index +'_sp'"> {{tabTitle}} </span>
</div>