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 ...
随机推荐
- delphi 10.3 IOS中英文错位
delphi 每回升级都会遇到各种问题, 在安卓和windows下正常,ios遇到排版问题. 解决办法:将附件文件放至程序目录下. 百度网盘下载附件 链接: https://pan.baidu.com ...
- 使用IDEA连接mysql数据库
1.IDEA配置数据库连接 2.添加数据库: 3.填写数据库信息: database输入框里面填写要连接的数据库名称 然后点击test connection,会弹出一个框,提示下载驱动,点击进行下载即 ...
- Java——容器（Set）
[Set接口] <1>Set接口是Collection的子接口,Set接口没有提供额外的方法. <2>实现Set接口的容器类中的元素是没有顺序的,而且不可以重复. <3& ...
- jquery ajax实现文件上传
test5.html <html> <head> <meta http-equiv="Content-Type" content="text ...
- RabbitMQ 工作图解
(转网上的图) (原文地址 ,http://www.cnblogs.com/knowledgesea/p/5296008.html)
- 大数据笔记（十六）——Hive的客户端及自定义函数
一.Hive的Java客户端 JDBC工具类:JDBCUtils.java package demo.jdbc; import java.sql.DriverManager; import java. ...
- Laravel 的Artisan 命令学习
Laravel 的Artisan 命令学习 Artisan 是 Laravel 提供的 CLI(命令行接口),它提供了非常多实用的命令来帮助我们开发 Laravel 应用.前面我们已使用过 Artis ...
- Django的media配置与富文本编辑器使用的实例
效果预览 文章列表 添加文章 编辑文章|文章详情|删除文章 项目的基本文件 项目的Model from django.db import models # 导入富文本编辑器相关的模块 from cke ...
- benchmarks
系统性能测试 stream SPARK 测试 streaming benchmark https://github.com/yahoo/streaming-benchmarks
- python开发环境准备
python 以版本众多,包之间依赖复杂而著称,所以一个趁手的开发环境还是很有必要的. 我的建议是用Anaconda做环境隔离.包管理,PyCharm做项目开发,jupyter做笔记,ipython和 ...