vue v-for出來的列表,點選某個li使得當前被點選的li字型變紅操作
阿新 • • 發佈:2020-07-19
這裡使用的是給被點選的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字型變紅操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。