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. cocos2dx 游戏开发中常用场景切换方式以及特性

    runWithScene(CCScene* scene):启动游戏,并运行scene 场景.这个方法在主程序启动时第一次启动主场景时调用.   replaceScene(CCScene* scene) ...

  2. 【旧文章搬运】改PEB中的映像路径可以这样~

    原文发表于百度空间,2008-7-26========================================================================== 用常用的几个 ...

  3. Python 函数的参数传递

    C/C++中,传递参数的类型是可以指定的.一般来说,传递参数可以分为两种:值传递和引用传递.对于值传递,参数传递的过程中进行了复制操作,也就是说,在函数中对参数的任何改动都不会影响到传入的变量:对于引 ...

  4. EasyUI 扩展自定义EasyUI校验规则 验证规则(常用的)

    $.extend($.fn.validatebox.defaults.rules, { CHS: { validator: function (value, param) { return /^[\u ...

  5. CocoaPods(第三方类库管理工具)

    iOS安装CocoaPods详细过程  一.简介 什么是CocoaPods CocoaPods是OS X和iOS下的一个第三类库管理工具,通过CocoaPods工具我们可以为项目添加被称为“Pods” ...

  6. CSU_1216【异或最大值】

    转自:http://blog.csdn.net/fuyukai/article/details/50366133 题目简述: 经典题目,求一个数组中两个数异或运算的最大值.题目极其简单,但是要求的复杂 ...

  7. python 面向对象十三 枚举类

    from enum import Enum Month = Enum('Month', ('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', ...

  8. layui前端框架实例(修复官网数据接口异常问题)

    layui前端框架实例,官网的实例会提示数据接口异常,已修复. 主要是修改数据表格,做一个可以用的实例,可以选中,编辑,删除等. gitee地址:https://gitee.com/pingg2019 ...

  9. c++继承汇总(单继承、多继承、虚继承、菱形继承)

    多重继承中,一个基类可以在派生层次中出现多次,如果一个派生类有多个直接基类,而这些直接基类又有一个共同的基类,则在最终的派生类中会保留该间接共同基类数据成员的多分同名成员.C++提供虚基类的方法使得在 ...

  10. Jenkins持续集成多任务之MultiJob

    项目实践中,我们可能需要在多个任务发布成功后在执行某个任务,这里就需要用到MultiJob这个插件. 案例场景:有3个任务:A.B.C,其中C任务需要等A和B执行成功后才会执行,那么就要先执行A和B, ...