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
}
}
})
vue导航条选中项样式的更多相关文章
- 自定义WPF ListBox的选中项样式
首先介绍一种简单地方法:就是通过自定义SystemColors类的参数来自定义WPF ListBox选择颜色的,SystemColors的HighlightBrushKey和HighlightText ...
- CSS导航条nav简单样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 按钮组,导航条选中其中一个后添加Class突出元素
$(document).on("click",".modalnavtop",function(e){ $(".modalnavtop").e ...
- jquery点击导航栏选中更换样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- vue 点击选中改变样式
data里isActive:-1,method里 checkedItem(index){ this.isActive=index;},页面里 <div v-for="(item,ind ...
- Bootstrap入门(十三)组件7:导航条
Bootstrap入门(十三)组件7:导航条 1.默认样式的导航条 2.嵌入表单和按钮 3.嵌入文本和非导航的链接 4.组件排列和下拉菜单 5.固定在顶部/底部 6.反色的导航条 7.路径导航 首先先 ...
- amazeui学习笔记--css(常用组件10)--导航条Topbar
amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...
- Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...
- UINavigationBar统一修改导航条样式
#pragma mark -- 统一导航条样式 //统一导航条样式 UIFont *font = [UIFont systemFontOfSize:19.f]; NSDictionary *textA ...
随机推荐
- hdu6606多校第四次04——线段树加速dp
/* 首先想到二分答案,难点在于如何判断是否有K段,每段和<=mid 把问题转化成求最多有R段,最少有L段,每段的的和<=mid,如果 L<=K<=R 那么显然存在把这个序列分 ...
- NX二次开发-获得图纸抑制尺寸的表达式UF_DRF_ask_controlling_exp
#include <uf.h> #include <uf_modl.h> #include <uf_drf.h> #include <uf_obj.h> ...
- P1566 加等式
P1566 加等式 题目描述 对于一个整数集合,我们定义“加等式”如下:集合中的某一个元素可以表示成集合内其他元素之和.如集合{1,2,3}中就有一个加等式:3=1+2,而且3=1+2 和3=2+1是 ...
- 把swf反编译成fla的几种方法
2007年著 第一种方法: 利用IMPERATOR FLA1.63 ,这个软件有演示版 和正式版 , 演示版不能反编译Action Scropt,在利用正式版反编译的过程中有时会丢失Action Sc ...
- linux安装&卸载IB网卡(mellanox)驱动
由于工作上的需求,需要在redhat6.5服务器上面安装mellanox品牌的IB网卡,故整理了一个安装&卸载IB网卡驱动的教程: 一.安装 1)下载相应操作系统驱动 http://www.m ...
- 【Android】Retrofit网络请求参数注解,@Path、@Query、@QueryMap.
对Retrofit已经使用了一点时间了,是时候归纳一下各种网络请求的service了. 下面分为GET.POST.DELETE还有PUT的请求,说明@Path.@Query.@QueryMap.@Bo ...
- HSF简单实现记录(基于 Pandora Boot 开发)
文章目录 声明 注意 安装轻量配置中心 启动轻量配置中心 配置 hosts 结果验证 开发工具准备 在 Maven 中配置 EDAS 的私服地址 验证配置是否成功 开发 demo下载 服务注册与发现 ...
- java-day15
File类 文件和目录路径名的抽象表示,主要用于文件和目录的创建.查找和删除等操作 静态成员 static String pathSeparator 路径分隔符 File.pathSeparator ...
- Python匹马行天下之python之父
龟叔和他的python 经过了漫长的旅程,终于要看到主角Python了.Python是现在非常非常流行的编程语言,在我们能看到的大部分编程语言排行榜中,Python都能在前三甲中拥有一席之地 ,并且发 ...
- 【python】并集交集
set是用来去重的. 在list里使用union函数.这种方式不适用于元素为字典的. list(set(a)^set(b)) 这是求差集 所以交集就是并集和ab的差集. import random d ...