這里使用的是給被點(diǎn)擊的li添加類(lèi)名的方式

<template> <div class='person1'> <div v-for='(item,index) in lists' @click='clickAdd(index)' :key='index' :class='{red:i === index}'> <div>{{item.name}}</div> </div> </div></template><script>export default { data () { return { isShow: false, i: null, lists: [ {id: 1, name: ’rose’}, {id: 2, name: ’mike’}, {id: 3, name: ’jerry’} ] } }, methods: { clickAdd (index) { console.log(index) this.i = index } }, watch: { }}</script><style> li{ list-style: none; } .red{ color: red; }</style>

如果想要獲取lists里某條數(shù)據(jù)信息的話，直接將item傳遞過(guò)去即可（@click=“clickAdd(item)”）

補(bǔ)充知識(shí)：vue點(diǎn)擊ul中的li顯示，點(diǎn)擊其他地方隱藏

vue點(diǎn)擊ul中的li顯示彈框，點(diǎn)擊其他地方隱藏彈框

注意：ref='seatTipOperation'

<ul ref='seatTipOperation' v-if='seatTipOperationVisible'> <li @click='handleSeatTipAdd()'>添加</li> <li @click='handleSeatTipDelect()'>刪除</li> <li @click='handleSeatTipLock()'>鎖定</li> <li @click='handleSeatTipFillIn()'>插空</li> <li @click='handleSeatTipSocket()'>插座</li> <li @click='handleSeatTipSwop()'>對(duì)調(diào)</li></ul>

handleSeatList () { this.seatTipOperationVisible = true}

mounted () { // this的指向問(wèn)題 let that = this document.addEventListener(’click’, function (e) { // 這里that代表組件，this代表document // 冒泡也不會(huì)隱藏 if(!that.$refs.seatTipOperation.contains(e.target)){ that.seatTipOperationVisible = false } })}

以上這篇vue v-for出來(lái)的列表,點(diǎn)擊某個(gè)li使得當(dāng)前被點(diǎn)擊的li字體變紅操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。