vue v-for出來的列表,點擊某個li使得當前被點擊的li字體變紅操作

這里使用的是給被點擊的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里某條數據信息的話，直接將item傳遞過去即可（@click=“clickAdd(item)”）

補充知識：vue點擊ul中的li顯示，點擊其他地方隱藏

vue點擊ul中的li顯示彈框，點擊其他地方隱藏彈框

注意：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()'>對調</li></ul>

handleSeatList () { this.seatTipOperationVisible = true}

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

以上這篇vue v-for出來的列表,點擊某個li使得當前被點擊的li字體變紅操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。