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. MYSQL数据库学习----索引和触发器

    一:索引 索引是创建在数据库表上,其作用是提高对表中数据的查询速度. 假设数据库中有一张1000条记录的表格,如果没有创建索引的话,用户想通过查询条件查询,实际上是把整个数据库中1000条记录都读取一 ...

  2. chorme dev tools的小技巧

    1 快速文件转换 在DevTools打开的时候,你可以按下Ctrl+P来快速的寻找和打开你工程中的任意文件. 2 在源代码中搜索 Ctrl+Shift+F 即可在所有已加载的文件中查找一个特定的字符串 ...

  3. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 09. Model验证

    数据注解 这样前后就会有div把这个inoput给包起来 添加一个Label使用TagHelper也有只能提示 出现的效果是这样的,实际上是把model的属性名打印出来.了. 把其他几个label也添 ...

  4. ccflow_004请假流程-傻瓜表单-经典模式

    ccflow_004请假流程-傻瓜表单-经典模式

  5. the little schemer 笔记(8)

    第八章 lambda the ultimate 还记得我们第五章末的rember和insertL吗 我们用equal?替换了eq? 你能用你eq?或者equal?写一个函数rember-f吗 还不能, ...

  6. 伪元素选择器:before 以及 :after

    E:after.E:before 在旧版本里是伪类,在新版本里是伪元素,新版本下E:after.E:before会被自动识别为E::after.E::before,按伪元素来对待,这样做的目的是用来做 ...

  7. 轻松搞定JSONP跨域请求【转】,文章非常好!

    http://blog.csdn.net/u014607184/article/details/52027879

  8. Python标准库 urllib

    urllib是python的一个获取url的模块.它用urlopen函数的形式提供了一个非常简洁的接口.这使得用各种各样的协议获取url成为可能.它同时 也提供了一个稍微复杂的接口来处理常见的状况-如 ...

  9. Udp实现省略编码

    class My_Socket(socket.socket): def __init__(self, encoding='utf-8'): self.encoding = encoding super ...

  10. DFS水题 URAL 1152 False Mirrors

    题目传送门 /* 题意:一个圈,每个点有怪兽,每一次射击能消灭它左右和自己,剩余的每只怪兽攻击 搜索水题:sum记录剩余的攻击总和,tot记录承受的伤害,当伤害超过ans时,结束,算是剪枝吧 回溯写挫 ...