vue导航条选中项样式

html:

<div id="app">
  <div class="collection">
    <a href="#!" v-for="gameName in gameNames"
       @click="selected(gameName)"
       :class="{active: activeName == gameName}">{{gameName}}</a>
  </div>
</div>

 

javascript:

new Vue({
  el: "#app",
  data: {
    gameNames: [‘魔兽世界‘, ‘暗黑破坏神Ⅲ‘, ‘星际争霸Ⅱ‘, ‘炉石传说‘, ‘风暴英雄‘,
      ‘守望先锋‘
    ],
    activeName: ‘‘
  },
  methods: {
    selected: function(gameName) {
      this.activeName = gameName
    }
  }
})

  

原文地址:https://www.cnblogs.com/luyuefeng/p/8177328.html

时间: 2024-11-04 00:06:09

vue导航条选中项样式的相关文章

按钮组,导航条选中其中一个后添加Class突出元素

$(document).on("click",".modalnavtop",function(e){ $(".modalnavtop").each(function(){ if(this==e.target){ if($(e.target).hasClass("navActive")){ return } else{ $(e.target).addClass("navActive"); }} else{ i

vue 点击选中改变样式

data里isActive:-1,method里 checkedItem(index){ this.isActive=index;},页面里 <div v-for="(item,index) in nameoptions" v-bind:class="{active:index==isActive}" @click="checkItem(index)>{{item.name}}</div>

CSS——关于列表和导航条菜单之垂直菜单制作

导航条菜单,即左图所示.下面,将一一展开如何制作. 1.首先,制作一个垂直的项目菜单,用<ul><li>标签写出基本内容,然后在样式表里面用margin和padding去掉内外边距,用list-style属性去掉原有的项目符号,插入自己喜欢的项目符号,代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D

第6章 对列表应用样式和创建导航条

1 垂直列表 1 <style type="text/css"> 2 ul.nav { 3 margin: 0; 4 padding: 0; 5 width: 8em; 6 list-style-type: none; 7 background-color: #8BD400; 8 border: 1px solid #486B02; 9 } 10 11 ul.nav a {display: block; 12 color: #2B3f00; 13 text-decorati

Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条

本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也就是手机上,我们页面的宽度并不像PC端那样大,可以显示很长的导航项,但对于我们移动端来说,由于功能的拓展,或者业务的细分,往往导航项也会随之增多,一旦超过移动端在一行的页面显示宽度,那便会出现导航项换行的现象,虽说也有这样布局,但一旦导航项增多到一定程度的时候,我们的页面(首页)将均被导航项霸占,这

切小标签圆角 设置导航条字体样式

切小标签圆角 UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.markLabel.bounds byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(5, 5)]; CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init]; mas

Jquery给当前页或者跳转后页面的导航栏添加选中后样式

解决方法有两种:一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失:另一种情况是即使刷新页面后样式仍然有效. 直接上代码: 第一种情况: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <script type="text/javascript" src="templets/js/jquery.js"></script>  <script type=&qu

基于Bootstrap实现下图所示效果的页面,一个白底的带有两个菜单项、一个下拉菜单和一个登录表单的基本导航条

1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="widt

全局CSS样式--插件 导航条

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width,initial-