Vue实现点击li变色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<ul id="change">
<li v-for="(m,index) in content" @click="doActive(index)" :class="{active:index==current}">{{m}}</li>
</ul>
<script src="../js/vue.js"></script>
<script>
let eg = new Vue({
el:"#change",
data:{
current:0,
content:['aaa','bbb','ccc','ddd','eee']
},
methods:{
doActive:function(index){
this.current = index;
}
}
})
</script>
</body>
</html>
每次点击时将当前被点击的li的索引串到doActive中
current 用于保存该索引
v-bind的对象语法 当index==current的时候会为当前li增加active的class
Vue实现点击li变色的更多相关文章
- 鼠标移到导航上面 当前的LI变色 处于当前的位置
鼠标移到导航上面 当前的LI变色 处于当前的位置,广泛应用于当前导航. 点击这里查看效果 以下是源代码: <html> <head> <meta http-equiv=& ...
- 点击li,点击的li添加class,其余去掉class
点击li,点击的li添加class,其余去掉class <script type="text/javascript"> $(function () { var liob ...
- vue 如何点击按钮返回上一页
1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...
- jquery如何实现点击LI标签和下面的LI互换顺序? 超简单代码
转: jquery如何实现点击LI标签和下面的LI互换顺序? 上面的效果涉及jquery的两个方法: next() : 获得匹配元素集合中每个元素紧邻的下一个同胞元素. after() :在被选元 ...
- jquery点击li 获取当前父节点所在类的索引
jquery点击li 获取当前父节点所在类的索引 $('.jbcz').find('.content li').click(function(){ //alert($('.jbcz').find('. ...
- 获取点击li的当前索引
获取点击li的当前索引 点击特定次序的li 展现特定的页面 $('.wgsb').find('.wangge_data_list li').click(function(){ var index=$ ...
- vue验证码点击更新
vue验证码点击更新 不说啥,直接贴代码 html: <img class="captcha" @click="editCaptcha" :src=&qu ...
- vue实现点击图标,图标在2s中完成旋转
<!-- 点击 vue实现点击图标,图标在2s中完成旋转 1==>如何让它在2s内完成旋转 使用动画 transform: rotate(-180deg); 动画的运动状态 transit ...
- vue 的点击事件怎么获取当前点击的元素
手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 首先 vue的点击事件 是用 @cl ...
随机推荐
- Python pdfkit
序言 住在地下室的人,依然有仰望星空的权利. pdfkit python使用pdfkit中,如果使用pdfkit.fromurl 或者pdfkit.fromstring等,就会出现上述错误.而且如果你 ...
- UOJ #228. 基础数据结构练习题 线段树 + 均摊分析 + 神题
题目链接 一个数被开方 #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",st ...
- SpringBoot拦截器和 Servlet3.0自定义Filter、Listener
官方文档译文 Spring Boot 包括对嵌入式Tomcat,Jetty和Undertow服务器的支持.大多数开发人员使用适当的“Starter”来获取完全配置的实例.默认情况下,嵌入式服务器在 p ...
- Ubuntu 16.04下使用docker部署rabbitmq
(以下docker相关的命令,需要在root用户环境下或通过sudo提升权限来进行操作.) 1.拉取rabbimq镜像到本地 docker pull rabbitmq 2. Docker运行rabbi ...
- Leetcode 3. Longest Substring Without Repeating Characters(string 用法 水题)
3. Longest Substring Without Repeating Characters Medium Given a string, find the length of the long ...
- window 连接服务器工具
Xshell xftp 下载网址 以上两个软件均免费, 只需要邮件激活即可. 其中 xshell 主要用来连接服务器,方便使用命令行.xftp 方便传输文件.
- [BZOJ3140][HNOI2013]消毒:二分图匹配
分析 假如实验皿是二维的,那么这道题便是一个二分图最小点覆盖问题,可以转化为二分图最大匹配问题,使用匈牙利算法解决. 考虑如何扩展到三维,首先我们发现一次操作的代价为\(min(x,y,z)\).不难 ...
- 数据库为什么使用B+树而不是B树
B树和B+树的区别主要有两点: 在B树中,你可以将键和值存放在内部节点和叶子节点,但在B+树中,内部节点都是键,没有值.叶子节点同时存放键和值 B+树的叶子节点有一条链相连,而B+树的叶子节点各自独立 ...
- 谷歌 AXURE RP EXTENSION拓展问题
我们打开某种文件页面是 会提示我们下载 AXURE RP EXTENSION 拓展. 其实我们可以直接用ie浏览器打开即可,不用下载
- 005-spring-data-elasticsearch 3.0.0.0使用【三】-spring-data之Spring数据扩展
续 1.8.Spring数据扩展 这些扩展使Spring Data在各种环境下的使用成为可能.目前大部分的整合都是针对Spring MVC. 1.8.1.Querydsl扩展 Querydsl是一个框 ...