vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作

vue v-for出来的列表出来的列表,点击某个点击某个li使得当前被点击的使得当前被点击的li字体变红字体变红

操作操作

主要介绍了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}">

data () {

return {

isShow: false,

i: null,

lists: [

{id: 1, name: 'rose'},

{id: 2, name: 'mike'},

{id: 3, name: 'jerry'}

]

}

},

watch: {

}

}

</script>

<style>

li{

list-style: none;

}

.red{

注意：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>

// this的指向问题

let that = this

document.addEventListener('click', function (e) {