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

Question

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

我在一个vue社区找到了这个例子，但在我的情况下，我想要我的＆＃34; id＆＃34;有一个前缀，而不仅仅是一个数字。

也就是说，如果索引是1，我想要<span id='sp_1'></span>而不是<span id='1'></span>。

Answer 1

你可以这样做，代码应该是自我解释的：

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

文档link。

Answer 2

如果您有唯一的ID，可以这样做，

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

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

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

在两者中，结果将是这样的：

<ul>
    <li id="Row_12">
        something
    </li>
</ul>

Answer 3

动态显示带有后缀和前缀字符串的html属性（如：id，：class等）的最佳方法。

前缀

在vue变量前使用连接符号“ +”和前缀字符串。 例如。

:id=" 'prefix_string_'+ index "

:class=" 'prefix_string_'+ class "

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

---

后缀的相同方式

在vue变量后的后缀字符串中将串联符号“ +”与单引号一起使用。 例如。

:id=" index + '_suffix_string' "

:class=" class + '_suffix_string'"

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