Vue.js:ID 프리픽스 문자열을 설정하는 방법

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

코드는 스스로 설명해야 합니다.

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

문서 링크

고유 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>

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

언급URL : https://stackoverflow.com/questions/41312385/vue-js-how-to-set-id-prefix-string