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
}
}
})

  

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

  1. 自定义WPF ListBox的选中项样式

    首先介绍一种简单地方法:就是通过自定义SystemColors类的参数来自定义WPF ListBox选择颜色的,SystemColors的HighlightBrushKey和HighlightText ...

  2. CSS导航条nav简单样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

    $(document).on("click",".modalnavtop",function(e){ $(".modalnavtop").e ...

  4. jquery点击导航栏选中更换样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. vue 点击选中改变样式

    data里isActive:-1,method里 checkedItem(index){ this.isActive=index;},页面里 <div v-for="(item,ind ...

  6. Bootstrap入门(十三)组件7:导航条

    Bootstrap入门(十三)组件7:导航条 1.默认样式的导航条 2.嵌入表单和按钮 3.嵌入文本和非导航的链接 4.组件排列和下拉菜单 5.固定在顶部/底部 6.反色的导航条 7.路径导航 首先先 ...

  7. amazeui学习笔记--css(常用组件10)--导航条Topbar

    amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...

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

    本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...

  9. UINavigationBar统一修改导航条样式

    #pragma mark -- 统一导航条样式 //统一导航条样式 UIFont *font = [UIFont systemFontOfSize:19.f]; NSDictionary *textA ...

随机推荐

  1. Shell case in语句详解

    和其它编程语言类似,Shell 也支持两种分支结构(选择结构),分别是 if else 语句和 case in 语句.在<Shell if else>一节中我们讲解了 if else 语句 ...

  2. 线段树优化dp——牛客多校第一场I(好题)

    和两天做了两道数据结构优化dp的题,套路还是差不多的 题解链接! https://www.cnblogs.com/kls123/p/11221471.html 一些补充 其实这道题的dp[i]维护的不 ...

  3. [JZOJ 5818] 做运动

    题意:带温度最短路. 思路: 我们将温度从小到大的将边加入,用并查集维护连通性. 如果一旦联通那么跑一遍\(spfa\)就可以得到答案. 复杂度\(O(m log m)\) #include < ...

  4. [JZOJ 5810] 简单的玄学

    思路: 就是考虑一个结论 对于\(1<=x<=2^n\),那么\(x\)与\(2^n - x\)中的2的个数相等. 证明: 我们将\(x\)表示成\(2^k*b\),那么\(2^n - x ...

  5. [JZOJ 5804] 简单的序列

    思路: 似乎和某次培训的题很像啊... 将左括号记为1,右括号记为-1,那么最终一定加和为0,然后再求最小前缀和. 用dp解决即可. #include <bits/stdc++.h> us ...

  6. k8s 存储 nfs服务

    1.所有节点安装nfs yum install nfs-utils -y 2.配置nfs服务端,在master节点上 vim exports /data 10.0.0.0/24(rw,async,no ...

  7. jquery操作html元素之(添加元素)

    添加新的 HTML 内容 我们将学习用于添加新内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在 ...

  8. 解决:Map的area属性标签鼠标Hover可以给area加背景

    css的area标签是不支持hover的,只有a标签才支持.li标签在IE浏览器下才支持,所以采用jquery的mouseenter和mouseleave事件完成.首先讲jQuery对应的事件:1.m ...

  9. man命令的使用方法

    转载自:http://www.cnblogs.com/hnrainll/archive/2011/09/06/2168604.html Linux man命令的使用方法 Linux提供了丰富的帮助手册 ...

  10. StringUtils里的isEmpty和isBlank的区别

    这边首先以一个简单的测试代码来解释这两者的区别: @Test void stringTest(){ String a = " "; boolean empty = StringUt ...