web-dev-qa-db-ja.com

Vue.js：idプレフィックス文字列を設定する方法は？

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>が必要です。

vue.jsvuejs2
8
wtf512

あなたはただ行うことができます、コードは自明でなければなりません：

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

ドキュメント リンク 。

16
Saurabh

接尾辞とプレフィックス文字列を使用して：id、：classなどのHTML属性を動的にする最良の方法。

プレフィックス

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>
0
Mayank Dudakiya

一意の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>
0
Mohd Domais