vue footer点击变色
<header class="tab_nav">
<div v-for="(item,index) in tabNav" @click="selected(index1,$event)" :key="index1" :class="{'active':item.active}">
<img :src="item.imgUrl" alt="" >
<span>{{item.title}}</span>
</div>
</header>
1
//data内的数据
tabNav:[
{title:'我参与的',active:true,imgUrl:'/src/images/index/participate.png'},
{title:'我发布的',active:false,imgUrl:'/src/images/index/publish.png'},
{title:'我抽奖的',active:false,imgUrl:'/src/images/index/luck_draw.png'}
],
//methods方法 tabNav栏切换导航
selected: function(index){
this.tabNav.forEach(ele => ele.active = false );
this.tabNav[index1].active = true;
// this.getActivityList();
},
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue</title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="example">
<ul >
<li v-for="(item, index) in navLists" :class="{active:changeRed == index}" @click="colorChange(index)">{{item.text}}</li>
</ul>
</div>
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#example',
data: {
isActive: false,
navLists: [
{
"text":"首页"
},
{
"text":"组件"
},
{
"text":"API"
},
{
"text":"我们"
}
],
changeRed : 0
},
methods: {
colorChange: function(index) {
console.log(index)
this.changeRed = index;
}
} })
</script>
</body>
</html>
vue footer点击变色的更多相关文章
- android 自定义控件——（五）按钮点击变色
----------------------------------按钮点击变色(源代码下有属性解释)------------------------------------------------- ...
- vue 如何点击按钮返回上一页
1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...
- (网页)angular中实现li或者某个元素点击变色的两种方法(转)
转自脚本之家: 本篇文章主要介绍了angular中实现li或者某个元素点击变色的两种方法,非常具有实用价值,需要的朋友可以参考下 本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享 ...
- footer点击添加active class
//footer点击添加active class var indexFooter= document.querySelectorAll('#index_footer li'); for (var i ...
- jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- Android实现按钮点击效果（第一次点击变色，第二次恢复）
1.首先创建一个按钮 <Button android:id="@+id/click" android:layout_width="fill_parent" ...
- vue验证码点击更新
vue验证码点击更新 不说啥,直接贴代码 html: <img class="captcha" @click="editCaptcha" :src=&qu ...
- 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- vue实现点击图标，图标在2s中完成旋转
<!-- 点击 vue实现点击图标,图标在2s中完成旋转 1==>如何让它在2s内完成旋转 使用动画 transform: rotate(-180deg); 动画的运动状态 transit ...
随机推荐
- 【牛客网-剑指offer】旋转数组的最小数字
题目: 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋 ...
- 聊聊动态链接和dl_runtime_resolve
写在前面 linux下的动态链接相关结构,重新回顾_dl_runtime_resolve的流程以及利用方法 动态链接相关结构 为了高效率的利用内存,多个进程可以共享代码段.程序模块化方便更新维护等,动 ...
- Linux服务器上创建日志服务器和FTP服务器
参考地址: http://www.111cn.net/sys/CentOS/81133.htm https://www.cnblogs.com/laoxiajiadeyun/p/9943742.htm ...
- shell script 二 判断符号【】 shift 偏移量 if then fi
判断符号[]类似于test.但是[]有通配符及正则表达式,为了区分,利用[]来做判断时,前后都需要加空格来区分.又一个坑 [ -z "$HOME" ];echo $? 例: 1 r ...
- Sphinx + Read the docs theme
前言: 使用Sphinx 生成文档和使用 Read The Docs 的 readthedocs/sphinx_rtd_theme,假设是在Windows上运行并已安装好 python,可以执行pyt ...
- react 脚手架使用
下载脚手架 npm i react create-react-app //下载安装脚手架 create-react-app pro_nmae //创建一个react项目 尽量不要使用大写,因为在Lin ...
- vue 通过插槽分发内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- MySQL不支持事务处理的解决方法
MySQL数据库默认的存储引擎类型是MyISAM,这种存储引擎类型不支持事务处理. 在MySQL中,只有InnoDB存储引擎类型的数据表才能支持事务处理. 因此,如果想让MySQL支持事务处理,只要将 ...
- springboot集成使用rabbitmq笔记(1.rabbitmq安装)
使用rabbitmq笔记一 使用rabbitmq笔记二 使用rabbitmq笔记三 1.选择适配的版本,参考---https://www.rabbitmq.com/which-erlang.html ...
- Comet OJ - Contest #11 E ffort（组合计数+多项式快速幂）
传送门. 题解: 考虑若最后的总伤害数是s,那么就挡板分配一下,方案数是\(C_{s-1}^{n-1}\). 那么问题在于总伤害数很大,不能一个一个的算. \(C_{s-1}^{n-1}\)的OGF是 ...