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. bootstrapValidator--表单校验

    关于表单校验 要依次引入 <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"& ...

  2. delphi 注册表

    Delphi中定义了一个Tregistry类,通过使用这个类中封装的很多有关对注册表操作的方法和属性可以完成对注册表的操作.1. 在注册表中创建一个新的关键字Tregistry类中有一个CreateK ...

  3. SXOI2018酱油记

    Day 0: 嗯前一天刚听说要去参加省选(可能以前也说了不过没听见),作为弱省高一的蒟蒻准备去打打酱油.下午去五中试机啥也没敲晃荡一圈又回去了.今年来也就是打打酱油心情自然是很平静,真不知道明年现在我 ...

  4. Codeforces786B

    传送门 n个节点且固定起点最短路,三种加边方法 1.u->v, 边权为w:2. u->[l, r], 边权为w:3. [l, r]->u, 边权为w AC_Code #include ...

  5. spring其他配置 (3)

    目录 一.自动装配 Autowired 二.bean的作用于singleton,prototype 三.引入外部资源properties文件 四.SpEL表达式 (可以为属性进行动态的赋值) 五.通过 ...

  6. LeetCode 1108. Defanging an IP Address (IP 地址无效化)

    题目标签:String 题目给了我们一组 ip address,让我们把 . 变成 [.],这题可以用replace,但是这样做的话,好像没意义了.所以还是走一下array,具体看code. Java ...

  7. .Net Core 部署之一 《CentOS 从GitHub/Gitee 等源代码网站部署Web网站》

    先看下楼主从某阿打折购买的渣渣服务器 lsb_release -a 一.安装dotnet-SDK 注册微软的服务 sudo rpm -Uvh https://packages.microsoft.co ...

  8. UVA-10200-Prime Time-判断素数个数(打表预处理)+精度控制

    题意: 给出a.b区间,判断区间内素数所占百分比 思路: 注意提前打表和控制精度1e-8的范围足够用了 细节: 精度的处理 判断素数的方法(且返回值为bool) 数据类型的强制转换 保存素数个数 提前 ...

  9. 干货:Java正确获取客户端真实IP方法整理

    在JSP里,获取客户端的IP地址的方法是:request.getRemoteAddr(),这种方法在大部分情况下都是有效的.但是在通过了Apache,Squid等反向代理软件就不能获取到客户端的真实I ...

  10. mysql8以上版本时区问题:The server time zone value乱码XXXX

    异常类似: The server time zone value '�й���׼ʱ��' is unrecognized or represents more than one time zone. ...