您好,登錄后才能下訂單哦!
這篇文章主要講解了vue v-for出來的列表,如何實(shí)現(xiàn)點(diǎn)擊某個(gè)li使得當(dāng)前被點(diǎn)擊的li字體變紅,內(nèi)容清晰明了,對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會(huì)有幫助。
這里使用的是給被點(diǎn)擊的li添加類名的方式
<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傳遞過去即可(@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的指向問題 let that = this document.addEventListener('click', function (e) { // 這里that代表組件,this代表document // 冒泡也不會(huì)隱藏 if(!that.$refs.seatTipOperation.contains(e.target)){ that.seatTipOperationVisible = false } }) }
看完上述內(nèi)容,是不是對(duì)vue v-for出來的列表,如何實(shí)現(xiàn)點(diǎn)擊某個(gè)li使得當(dāng)前被點(diǎn)擊的li字體變紅有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。