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. eclipse整合tomcat

    首先确保jdk已经安装好 步骤1 获得服务器运行环境配置,Window/Preferences/Server/Runtime Environmen l步骤2 添加服务器 步骤3 选择服务器在硬盘的地址 ...

  2. 1、HTML的本质以及在web中的作用

    一.HTML 1.一套规则,浏览器认识的规则. 2.开发者: 学习Html规则 开发后台程序: -写Html文件(充当模板的作用)****** -数据库获取数据,然后替换到html文件的指定位置(We ...

  3. UVa 11040 Add bricks in the wall (水题递推)

    题意:给定一个金字塔,除了最后一行,每个数都等于支撑它的两个数的和,现在给奇数行的左数奇数位置,求整个金字塔. 析:很容易看出来,从下往上奇数行等于 a[i][j] = (a[i-2][j-1] - ...

  4. 基于ANDROID平台,U3D对蓝牙手柄键值的获取

    对于ANDROID平台,物理蓝牙手柄已被封装,上层应用不可见,也就是说对于上层应用,不区分蓝牙手柄还是其它手柄: 完成蓝牙手柄和ANDROID手机的蓝牙连接后,即可以UNITY3D中获取其键值: 在U ...

  5. linux下sprintf_s函数的替代(转载)

    转自:http://www.cnblogs.com/yeahgis/archive/2013/01/22/2872179.html windows平台下线程安全的格式化字符串函数sprint_s并非标 ...

  6. ASP.NET Core Web API + Angular 仿B站(一) 目的分析以及创建 WebAPI + Angular7 项目

    前言: 本系列文章主要为对所学 Angular 框架的一次微小的实践,对 b站页面作简单的模仿. 本系列文章主要参考资料: 微软文档: https://docs.microsoft.com/zh-cn ...

  7. 51nod 1069【思维】

    具体思路来自相关讨论 给个不太严谨的证明思路: 第一步:证明路径可逆,也就是如果(a, b) -> (x, y)可行,则(x, y) - > (a, b)可行 这个比较直观,只需要分别由( ...

  8. python 单下划线和双下划线

    underline.py __all__ = ['_underline_variable', '__underline_variable', '_underline_func', '__underli ...

  9. redis 发布订阅实现异步实时发短信

    redis 中发布和订阅可以实现消息的实时传输,这里我只是用它的事件驱动,当客户端发送了消息,服务器端立马可以接收指令处理相应的业务逻辑. 客户端 client.php <?php //发布 $ ...

  10. 笔记:JavaScript闭包

    闭包 闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰.直观的说就是形成一个不销毁的栈环境. 对于闭包,当外部函数返回之后,内部函数依然可以访问外部函数的变量 ...