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. python+selenium高亮显示正在操作的页面元素

    原文地址:https://blog.csdn.net/wxstar8/article/details/80801405 from selenium import webdriver import un ...

  2. ASP.NET Core:创建一个Core项目

    ylbtech-ASP.NET Core:创建一个Core项目 1.返回顶部 1. 2. 3. 4.         5. 2.返回顶部 1.新建Razor页面 2. 3. 4.Abc 4.1.Abc ...

  3. docker安装-卸载

    docker官网正确安装-卸载 一.查看系统内核 uname -r 3.10.0-229.el7.x86_64 二.Install Docker 1.Install with yum sudo yum ...

  4. ccflow汇总帖

    视频教程学习 公司电脑路径; E:\开源工作流\ccflow佳怡物流版\ccflow\doc cclfow的码云地址: https://gitee.com/opencc/ccflow 在线demo演示 ...

  5. Oracle Escape

    select * from tablewhere col like '%\_'escape'\'

  6. hdoj1116【欧拉回路】

    题意: 应该是求一个路径让所有的单词能够首尾连起来,不需要头和尾的单词也连起来...应该很容易懂吧...我这里讲的好烂.. 思路: 从欧拉回路的定义引申过来. 1. 连通. 2. 入度和出度问题. 问 ...

  7. POJ1458【最长公共子序列】

    基础DP. #include <iostream> #include <stdio.h> #include <string.h> #include <stac ...

  8. P5112 FZOUTSY

    传送门 没想到这题还这能用莫队--本来看看以为复杂度会挂的-- 预处理出每个字母开头往后\(k\)个的字符串的哈希值,然后大概就是那道小z的袜子了 而且据说这题的哈希得用自然溢出 //minamoto ...

  9. 洛谷P2564 [SCOI2009]生日礼物(单调队列)

    传送门 准确的来说这个应该叫尺取法? 先对所有的点按$x$坐标进行排序 我们维护两个指针$l,r$,每一次令$r$不断右移直到所有颜色齐全,再不断右移$l$直到颜色数不足,那么此时$[l-1,r]$这 ...

  10. pip 安装出现提示

    The directory '/home/zdj/.cache/pip/http' or its parent directory is not owned by the current user a ...