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 ...
随机推荐
- leetcode -有效的字母异位词 python&C++
C++解题代码: class Solutiion { public: bool isAnagram(string s, string t) { ](); int n = s.length(); int ...
- 5432. 【NOIP2017提高A组集训10.28】三元组
题目 题目大意 给你\(X+Y+Z\)个三元组\((x_i,y_i,z_i)\). 然后选\(X\)个\(x_i\),选\(Y\)个\(y_i\),选\(Z\)个\(z_i\). 每个三元组只能选择其 ...
- Redis缓存数据库常见操作
Jedis的最为常见的操作.主要包括常用的列表(list).集合(set).有序集合(sorted set).哈希表(hash)等数据结构,以及其他特性支持. 参考资料:http://hello-ni ...
- 【Codeforces 1148B】Born This Way
[链接] 我是链接,点我呀:) [题意] 有人要从A地飞向B地,然后从B地飞向C地. 给出A,B地的n.m个航班的出发时间. 已知从A到B的航班都是ta和tb时长到达B.C 只有到达B的时候航班还没起 ...
- delphi 不规则窗体与桌面宠物
二.支持区域操作的编程接口在Windows的API函数中有一组用于区域操作的函数,可以用来生成区域.合并区域.获取区域数据.根据数据生成区域.把区域和窗体联系等,其中常用的几个函数有:生成矩形区域的C ...
- DELPHI读取网页源文件和获取字符串
说到网页采集,通常大家以为到网上偷数据,然后把到收集到的数据挂到自己网上去.其实也可以将采集到的数据做为公司的参考,或把收集的数据跟自己公司的业务做对比等.目前网页采集多为3P代码为多(3P即ASP. ...
- NX二次开发-UFUN获取工程图的数量和tag UF_DRAW_ask_drawings
NX9+VS2012 #include <uf.h> #include <uf_draw.h> #include <uf_part.h> #include < ...
- NX二次开发-UF_ASSEM_ask_component_data获取装配部件的相关信息
NX9+VS2012 #include <uf.h> #include <uf_ui.h> #include <uf_assem.h> ], void* user_ ...
- Codeforces 1182A Filling Shapes
题目链接:http://codeforces.com/problemset/problem/1182/A 思路:n为奇数时不可能完全填充,ans = 0.发现若要完全填充,每俩列可产生俩种情况,所以为 ...
- Android 7.0 IMS框架详解
本文主要讲解IP Multimedia Subsystem (IMS)在Android 7.0上由谷歌Android实现的部分内容.从APP侧一直到Telephony Framework,是不区分CS ...