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

在数据中返回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>

你甚至不需要这种方法。

Answer 2

查看Cass and Style Binding Docs

下面的

伪示例，还为vue-router添加了一些shorcuts以避免路由器链接组件，你只需将：绑定到<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'}] 
  }
}

如何在Vue中轻松切换`selected`风格？

2 个答案: