如何在Vue中轻松切换“`selected`”样式？

Question

如何轻松切换selected样式？

在模板中，我有一个导航：

  <ul class="nav">
    <li class="nav-item selected" @click="clickLi(0)"><router-link to="/">首页</router-link></li>
    <li class="nav-item" @click="clickLi(1)"><router-link to="/data-center">数据中心</router-link></li>
  </ul>

在方法上：

clickLi(page_num){
    // there I have to clear all the li `selected` style, then add the style to the page_num.
}

在Vue中，是否有更好的方法来实现这种效果？

Answer 1

看看Cass和样式绑定文档

下面的伪示例，还向vue-路由器添加了一些快捷方式，以避免路由器-链路组件，您只需将:绑定到<li>即可。

<li
   v-for="(item, $index) in routes" 
   @click="selectedIndex = $index"
   :class="{'item-selected': $index == selectedIndex}"
   :to="item.path">{{ item.name }}</li>


// on component
data() {
  return { 
    selectedIndex: null,
    routes: [{path:'/', name: 'home'},{path:'/data-center', name:'data center'}] 
  }
}

Answer 2

在数据中，返回一个selected_num参数：

data() {
    return {
        selected_num: 0
    }
}

在模板中：

 <ul class="nav">
    <li class="nav-item" :class="selected_num===0 ? 'selected' : ''" @click="selected_num=0"><router-link to="/">首页</router-link></li>
    <li class="nav-item" :class="selected_num===1 ? 'selected' : ''" @click="selected_num=1"><router-link to="/data-center">数据中心</router-link></li>
  </ul>

你甚至不需要这个方法。