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

Question

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

我在一个 vue 社区找到了这个例子，但在我的情况下，我希望我的 "id" 有一个前缀，而不仅仅是一个数字。

也就是说，如果索引为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 等）的最佳方式。

Prefix

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

:id=" 'prefix_string_'+ index "

:class=" 'prefix_string_'+ class "

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

Same way for suffix

在 vue 变量后的后缀字符串中使用连接符号“+”到单引号中。例如

:id=" index + '_suffix_string' "

:class=" class + '_suffix_string'"

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

Vue.js how to set :id prefix string?