我有一個可以隨其他專案遞增的物件（專案）陣列，我通過回圈進入陣列來顯示它們。
看：
并且我想在單擊某個專案時突出顯示它（例如：另一個邊框頂部顏色），但是我未能針對一個特定元素并應用樣式而不將樣式應用于整個陣列。任何想法？
模板，我用的是 vuedraggable，不要介意：
<template #item="{ element }">
<div
class="item"
:key="element"
@click="
messageItemTitle(element.title);
messageItemID(element.id);
"
>
<div class="item-title">
{{ element.title }}
</div>
<div class="item-subType">
{{ element.type }}
</div>
</div>
</template>
腳本： 好吧，我以前撰寫的代碼都沒有，所以這里只有資料：
data() {
return {
dragItems: dragItemsList, //15 items that I can clone into dropItems
dropItems: [], //Array where I can add the items from dragItems
};
},
uj5u.com熱心網友回復：
您可以有條件地申請課程：
const app = Vue.createApp({
data() {
return {
items: [{id:1, title: 'aaa', type: 'type1'}, {id:2, title: 'bbb', type: 'type2'}, {id:3, title: 'ccc', type: 'type3'}],
selected: null
};
},
methods: {
message(el) {
this.selected = el.id
}
}
})
app.mount('#demo').item {
border: 3px solid transparent;
border-top-color: black;
}
.selected {
border-top-color: green;
}<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<div v-for="(element, i) in items" :key="i">
<!--<template #item="{ element }">-->
<div
class="item"
:class="selected === element.id && 'selected'"
:key="element"
@click="message(element)"
>
<div class="item-title">
{{ element.title }}
</div>
<div class="item-subType">
{{ element.type }}
</div>
</div>
<!--</template>-->
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/483722.html
標籤：javascript css Vue.js 循环 Vuejs3