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 ...
随机推荐
- css3 中的2D转换
一.CSS3转换 通过转换实现对对元素进行旋转.缩放.移动.拉伸的效果:这种原来必须要通过JS或者图片处理才可以实现的效果,现在都可以通过CSS3来完成. 2D转换采用transform属性来实现效果 ...
- php array_keys()函数 语法
php array_keys()函数 语法 作用:返回包含数组中所有键名的一个新数组.直线电机选型 语法:array_keys(array,value,strict) 参数: 参数 描述 array ...
- PC端无论页面有没有完全撑开把footer保持在最底部（不用定位）
最近在写项目,有的页面没有占到一屏,然后footer也就是底部就靠上了,这样很影响美观,于是在网上找了找,下面是我的成果 解决该问题的最好方法是采用CSS3提供的一种先进布局模型 :flexbox,可 ...
- 全球DC主机交流
全球DC主机交流https://www.globaldc.cn/ 全球DC主机交流论坛是一个综合性的国内服务器.国外服务器.高防清洗.硬件服务器交流论坛,主要为网友提供IP地址鉴定主机商,全球独立服务 ...
- Elasticsearch结构化搜索与查询
Elasticsearch 的功能之一就是搜索,搜索主要分为两种类型,结构化搜索和全文搜索.结构化搜索是指有关查询那些具有内在结构数据的过程.比如日期.时间和数字都是结构化的:它们有精确的格式,我们可 ...
- linux-解决添加的网卡无法识别的问题
添加网卡之后,网卡无法被正确的识别和使用排错方法 查看/etc/udev/rules.d/70-persistent-net.rules的内容,该文件中可以查看到新添加的网卡的MAC地址 修改/etc ...
- 大数据笔记（十五）——Hive的体系结构与安装配置、数据模型
一．常见的数据分析引擎 Hive:Hive是一个翻译器,一个基于Hadoop之上的数据仓库,把SQL语句翻译成一个 MapReduce程序.可以看成是Hive到MapReduce的映射器. Hive ...
- MSSQL 如何导出db所有用户权限创建语句
use dbgoDECLARE @Database varchar(255),@loginName varchar(255),@roleName varchar(255),@sql nvarchar( ...
- postgresql获取表最后更新时间（通过表磁盘存储文件时间）
一.创建获取表更新时间的函数 --获取表记录更新时间(通过表磁盘存储文件时间) create or replace function table_file_access_info( IN schema ...
- React-Native 之 GD （十六）首页筛选功能
1.首页筛选功能 GDCommunalSiftMenu.js /** * 筛选菜单 */ import React, { Component, PropTypes } from 'react'; im ...