vue点击时动态改变样式

template中

<li :class="{ active:index==isActive }" @click="changeValue(index)"
v-for="( item , index ) in items" :key="item.CategoryId">{{item.CategoryName}}</li>

data中

isActive:false,

methods中

changeValue(index){
this.isActive=index;
}`

如果本文对您有帮助,请抬抬您的小手,点下右下角的推荐, ^-^,当然如果看了这篇博客对您有帮助是我最开心的事,毕竟赠人玫瑰,手有余香, ^-^,如果这篇博客没有帮助到您,那就只能说一声抱歉啦

vue点击时动态改变样式 ------- 最简单的方法的更多相关文章

  1. vue 点击当前元素改变样式

    template  <ul>    <li v-for="(relation,index) in relations" v-bind:id="relat ...

  2. vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改

    vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...

  3. 微信小程序,动态改变样式

    小程序目前没有修改样式api,但是可以利用数据绑定实现动态改变样式,可以用view标签模拟page然后改变view标签的样式,以下案例演示了如果改变page背景颜色: <view class=& ...

  4. Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法

    Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46|  分类: Easy UI|举报|字号 订阅     可以使用$.parser.pa ...

  5. 点击时出现某个样式,1s后移除该样式的案例效果

    这里为了使效果更好的让用户体现出来,点击时添加的样式为background:yellow;1后移除该样式: 案例demo为: <!DOCTYPE html> <html lang=& ...

  6. 解决 Retrofit 多 BaseUrl 及运行时动态改变 BaseUrl ?

    原文地址: juejin.im/post/597856- 解决Retrofit多BaseUrl及运行时动态改变BaseUrl(一) 解决Retrofit多BaseUrl及运行时动态改变BaseUrl( ...

  7. 去除input标签点击时的默认样式

    去除input标签点击时的默认样式的方法 outline:none; //去除点击时的边框 border : none; //去除input框的边框

  8. ng-repeat动态改变样式

    当我们使用AngularJs的ng-repeat时候动态绑定数据时,遇到遍历出来的标签样式都一样,这时候希望根据数组的下标分别对应不同的样式 解决:使用$index获取数组下标根据下标改变样式 < ...

  9. vue动态改变样式

    <i class="el-icon-arrow-left" :style="{'color': deadColorArr[index]}" @click= ...

随机推荐

  1. Brackets(区间dp)

    Brackets Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8017   Accepted: 4257 Descript ...

  2. 利用PyCharm的Profile工具进行Python性能分析

    Profile:PyCharm提供了性能分析工具Run->Profile,如下图所示.利用Profile工具可以对代码进行性能分析,找出瓶颈所在. 测试:下面以一段测试代码来说明如何使用pych ...

  3. HNOI2017 day1 T2 影魔

    题目大意: 影魔,奈文摩尔,据说有着一个诗人的灵魂.事实上,他吞噬的诗人灵魂早已成千上万.千百年来,他收集了各式各样的灵魂,包括诗人.牧师.帝王.乞丐.奴隶.罪人,当然,还有英雄. 每一个灵魂,都有着 ...

  4. 开发微信小程序入门前

    开发微信小程序入门前 百牛信息技术bainiu.ltd整理发布于博客园 2016年09月21日晚 微信发不了微信“小程序”的内测版,一时间整个互联网都炸了锅.个大新闻.论坛都在讨论这个事情. 作为互联 ...

  5. PostgreSQ 连接问题 FATAL: no pg_hba.conf entry for host

    PostgreSQ数据库为了安全,它不会监听除本地以外的所有连接请求,当用户通过JDBC访问是,会报一些如下的异常: org.postgresql.util.PSQLException: FATAL: ...

  6. AppBoxFuture(七): 分布式外键约束

      关系数据库与NoSql其中的一个主要区别是具备完整的外键约束,虽说现在一些大厂在设计数据存储结构时禁止使用外键约束,靠业务逻辑来保证数据完整性,但考虑到是人就会犯错,为了保证关键业务数据的完整性, ...

  7. 如何实现session的共享?

    1.以cookie加密的方式保存在客户端. 优点是减轻服务器端的压力 缺点是受到cookie的大小限制,可能占用一定带宽,因为每次请求会在头部附带一定大小的cookie信息,另外这种方式在用户禁止使用 ...

  8. 51nod 1062【水题】

    直接打表构造啊 #include <stdio.h> #include <string.h> #include <iostream> using namespace ...

  9. dijkstra算法的应用(poj2387)+堆优化【还没学C艹很尴尬,不理解的先不写了,未完,待续...】

    一题非常简单的最短路题目,但是我就是很撒比的错在了,1.初始化:2.判断重边 堆优化,使用优先队列的堆优化:复杂度:O(ElogE); #include <stdio.h> #includ ...

  10. loj#2542. 「PKUWC2018」随机游走(树形dp+Min-Max容斥)

    传送门 首先,关于\(Min-Max\)容斥 设\(S\)为一个点的集合,每个点的权值为走到这个点的期望时间,则\(Max(S)\)即为走遍这个集合所有点的期望时间,\(Min(S)\)即为第一次走到 ...