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 ...
随机推荐
- M（model）V（view）C（controller,serlvet）,（分） 静态工厂模式，单例模式
- [CF1188B]Count Pairs 题解
前言 这道题目是道好题. 第一次div-2进前100,我太弱了. 题解 公式推导 我们观察这个式子. \[(a_i+a_j)(a_i^2+a_j^2)\equiv k \mod p\] 感觉少了点什么 ...
- ubantu apt-get install安装php及开展
.安装php apt-get install libapache2-mod-php5 php5 报错 E: Package 'libapache2-mod-php5' has no installat ...
- Online Game Development in C++ 第五部分总结
I. 教程案例框架描述 该套教程做了一个简单的汽车控制系统,没有用到物理模拟.用油门和方向控制汽车的加速度和转向,同时还有一些空气阻力和滚动摩擦力的设置增加了真实感.汽车的位置是通过加速度和时间等计算 ...
- 音频学习(一)-离线播放(AVAudioPlayer)
最后更新:2017-05-23 方法 - (nullable instancetype)initWithContentsOfURL:(NSURL *)url error:(NSError **)out ...
- tp5关联模型进行条件查询
public function wordOne(){ return $this->hasOne('TeachWord','id','w_id')->field('id,pid,title' ...
- ThinkPHP框架实现rewrite路由配置
rewrite路由形式: //网址/分组/控制器/方法 配置实现rewrite路由的配置: 1. 修改apache的配置 先修改httpd.conf配置文件中的AllowOverrideAll,全 ...
- QCOW2/RAW/qemu-img 概念浅析
目录 目录 扩展阅读 RAW QCOW2 QEMU-COW 2 QCOW2 Header QCOW2 的 COW 特性 QCOW2 的快照 qemu-img 的基本使用 RAW 与 QCOW2 的区别 ...
- Delphi XE2 之 FireMonkey 入门(20) - TStyleBook(皮肤、样式相关)
我觉得叫 "皮肤" 不如叫 "样式" 或 "风格", 因为它可以包含和动作关联的动画. 在 FMX 下, 控件可以任意绘制, 各部件个性化的 ...
- 【FICO系列】SAP 财务帐与后勤不一致情况
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FICO系列]SAP 财务帐与后勤不一致情况 ...