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 ...
随机推荐
- MySQL日期格式化 利用Mysql的DATE_FORMAT()进行日期格式转换
碰到一个MYSQL的问题,表logstatb中moment字段的内容是"年-月-日 时:分:秒",需要查询匹配“年月日”或“时:分:秒”即可的数据条目,这个时候就可以通过下面的SQ ...
- Java判断链表是否为回文链表
请判断一个链表是否为回文链表. 示例 1: 输入: 1->2 输出: false 示例 2: 输入: 1->2->2->1 输出: true 思路:1.通过快慢指针,来遍历链表 ...
- java中的访问修饰符详解
主要讲述一下java中protected的修饰控制范围. 在叙述protected修饰符使用之前,先来说一下java,可以发现,开发java程序是一个时时刻刻都在编写类.开发类.定义类的过程.类里面可 ...
- bzoj1045题解
[解题思路] (数据范围劝退?正确范围应该是n≤1000000) 设xi表示第i个小朋友给第i+1个小朋友的糖果数(特殊的,xn表示第n个小朋友给第1个小朋友的糖果数),Â表示平均糖果数,有如下方程组 ...
- bzoj1015题解
[题意分析] 给你一张无向图,要求支持删点和询问连通块数. [解题思路] 可以直接可持久化并查集大力艹过去. 考虑到正着删点就是倒着加点,所以并不需要可持久化.复杂度O((k+m)α(n)). [参考 ...
- NX二次开发-UFUN创建倒圆UF_MODL_create_blend
NX9+VS2012 #include <uf.h> #include <uf_modl.h> UF_initialize(); //创建块 UF_FEATURE_SIGN S ...
- Java-javaFx库运用-时钟显示
JavaFx是开发Java GUI程序的新框架.JavaFX应用可以无缝地在桌面或web浏览器中运行.具有内建的2D.3D动画支持,以及视频和音频的回放功能,可以作为一个应用独立运行或者在浏览器中运行 ...
- 用注册表创建无法删除的IE快捷方式
代码如下: Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE/SOFTWARE/Classes/CLSID/{98745625-1234 ...
- idea 设置默认maven auto import,不需要每次都弹出
1 2 误区 从这里点进去进行设置,或者每次打开项目右击下方的 auto impot都是不对的.
- Rabbit MQ 客户端 API 开发
项目开始 第一步首先需要引入对应的 jar 包 <!-- https://mvnrepository.com/artifact/com.rabbitmq/amqp-client --> & ...