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

【问题标题】：Vue.js how to set :id prefix string?Vue.js 如何设置 :id 前缀字符串？
【发布时间】：2016-12-24 10:19:33
【问题描述】：

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>。

【问题讨论】：

【解决方案1】：

你可以这样做，代码应该是不言自明的：

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

文档link。

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：