ul中的li共用一個事件，請問怎么傳遞參數(shù)去識別？

在模板中，我使用ul和li做了一個導航：

  <ul class="nav">
    <li class="nav-item selected" @click="clickLi"><router-link to="/">首頁</router-link></li>
    <li class="nav-item" @click="clickLi"><router-link to="/data-center">數(shù)據(jù)中心</router-link></li>
  </ul>

它們綁定有clickLi事件。

clickLi(){
    
}

導航效果圖：
圖片描述

我想要在clickLi上去切換selected樣式，我應該怎么傳遞參數(shù)呢？

回答

編輯回答

情殺

可以運用 vue 的動態(tài) class 做

<ul class="nav">
    <li class="nav-item" v-for="(v, index) in navs" :class="{selected: select==index}" @click="clickLi(index)"><router-link :to="v.link">{{v.text}}</router-link></li>
 </ul>

export default {
    data(){
        return {
            navs:[{link: '/', text: '首頁'}, {link: '/other', text: '其他'}],
            select: 0
        }
    },
    methods: {
        clickLi(index) {
            this.select = index;
        }
    }
}

2017年8月16日 06:29

編輯回答

逗婦乳

如果是列表循環(huán)可以用索引來識別，
如果是寫死的數(shù)據(jù)可以設置變量傳參來識別。

例：

模板添加傳參
<li class="nav-item" :class={'selected':checkedIndex==0} @click="clickLi(0)"><router-link to="/">首頁</router-link></li>
<li class="nav-item" :class={'selected':checkedIndex==1}  @click="clickLi(1)"><router-link to="/data-center">數(shù)據(jù)中心</router-link></li>

設置默認選中變量
data(){
 return{
  checkedIndex:0
 }
}

clickLi(index){
    this.checkedIndex = index
}

最好是建議通過列表循環(huán)來做

data(){
    return{
        nav:[{name:'首頁',route:'/',...},{name:'數(shù)據(jù)中心',route:'/data-center'...}]
    }
}

<ul>
    <li v-for="(item,index) in nav" @click="clickLi(index)" :class={'selected':checkedIndex==index}>{{item.name}}</li>
</ul>

2018年6月4日 06:31

編輯回答

念舊

設置一個

data() {
    return {
        selectedIndex: 0
    }
}

點擊第一個設置為0，點擊第二個設置為1
在模板里面判斷一下是不是等于相應的值

<ul class="nav">
    <li class="nav-item" :class="selectedIndex===0?:'selected':''" @click="selectedIndex=0"><router-link to="/">首頁</router-link></li>
    <li class="nav-item" :class="selectedIndex===0?:'selected':''" @click="selectedIndex=1"><router-link to="/data-center">數(shù)據(jù)中心</router-link></li>
  </ul>

2017年7月15日 06:49