在Vue中,可以通過使用v-for指令以及:id屬性來實現循環創建元素并動態賦予id值的需求。
<div v-for="item in items" :id="'item-'+item.id"> {{ item.name }} </div>
上面的代碼中,v-for指令用于循環遍歷items數組,生成對應數量的div元素。而:id屬性則通過Vue表達式求值機制動態計算出每個div元素的id值,其中'item-'是一個固定的字符串前綴,而item.id則是當前遍歷到的item對象中的id屬性值。
如果items數組中有三個對象,它們的id分別為1、2、3,那么最終生成的三個div元素的id值分別為'item-1'、'item-2'、'item-3'。
<div id="item-1">Object 1</div> <div id="item-2">Object 2</div> <div id="item-3">Object 3</div>
需要注意的是,如果items數組中的id值不是唯一的,那么生成的div元素的id也會重復,可能會引發一些不必要的問題。
因為v-for指令會自動在循環范圍內創建一個稱之為'循環作用域'的變量,所以也可以使用':'簡寫語法來引用循環作用域中的值:
<div v-for="(item, index) in items" :id="'item-'+item.id"> {{ index }}: {{ item.name }} </div>
在上面的代碼中,'item'和'index'分別代表每個遍歷到的item對象以及對應的索引值。通過這種方式可以更加自由地控制生成元素的id值,在某些情況下可能會更加方便。
下一篇html實現代碼高亮