template

 <ul>
   <li v-for="(relation,index) in relations" v-bind:id="relation.id" v-bind:id="relation.id" v-bind:class="{checked:index==nowIndex}" v-on:click="relationClick(index)">
    <i>
  </ul>

data

nowIndex:0

methods

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

style

.checked{
background: #eff4f7;
}

原文:https://www.jb51.net/article/146114.htm

vue 点击当前元素改变样式的更多相关文章

  1. vue点击时动态改变样式 ------- 最简单的方法

    vue点击时动态改变样式 template中 <li :class="{ active:index==isActive }" @click="changeValue ...

  2. vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字

    点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址: https://xibushijie.github.io/static/addClass.html &l ...

  3. vue 点击当前元素添加class 去掉兄弟的class

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

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

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

  5. css小记:hover 鼠标滑过让该元素的子元素或者其他元素改变样式

    <!DOCTYPE><head><meta http-equiv="Content-Type" content="text/html; ch ...

  6. Vue点击当前元素添加class 去掉兄弟的class

    <div id="app"> <ul> <li v-for="(todo, index) in todos" v-on:click ...

  7. vue中修改第三方组件的样式不生效

    问题 在使用element-ui时,有时候想要修改组件内的样式,但不成功,例如 <div class="test"> <el-button>按钮</e ...

  8. vue列表渲染,以及鼠标点击改变样式的问题

    在实际项目中,我们进场会遇到鼠标点击该表某个DOM元素的样式,在原生的js或者jquery中,我们会比较熟练的实现这个需求,但是在vue中怎么实现呢? 直接操作DOM?NO!NO! 既然我们的项目使用 ...

  9. Vue在点击内部元素时(获得焦点),怎样让外部div元素样式变化?

    问题: div内部有很多元素,div. p. span .input等,各元素有嵌套,现在点击某元素时需要最外面这个div边框高亮,例如,点击了input开始输入 假设html 结构如下  <d ...

随机推荐

  1. IncepText算法笔记

    源头:场景文本经常受到aspect ratio, scal, and orientation的影响 为了解决这个问题,提出了inceptext,主要贡献在于添加了inception-text modu ...

  2. 人生苦短_我用Python_configparser/yaml对配置文件读取/写入操作_010

    第一,我们先开始安装yaml库,configparser是自带库,yaml库是针对读取yml文件,configparser现阶段我只用于读取conf文件 首先:1)对象文件为:data.yml,下面的 ...

  3. IO流 读写文件

    读写文件 如前所述,一个流被定义为一个数据序列.输入流用于从源读取数据,输出流用于向目标写数据. 下图是一个描述输入流和输出流的类层次图. 下面将要讨论的两个重要的流是 FileInputStream ...

  4. 2-prometheus各组件安装

    相关下载: https://prometheus.io/download/https://github.com/prometheus/ 相关文档 https://songjiayang.gitbook ...

  5. 20 October in ss

    Contest A: sum 快速读. B: 鬼谷子的钱袋(coin) 贪心. 按照类似二进制的方式准备钱袋:1, 2, 4, 8, ... 以此装入的钱袋数目记为 \(N\). 如果最后剩余不足以凑 ...

  6. [CSP-S模拟测试]:平均数(二分答案+归并排序)

    题目描述 有一天,小$A$得到了一个长度为$n$的序列.他把这个序列的所有连续子序列都列了出来,并对每一个子序列都求了其平均值,然后他把这些平均值写在纸上,并对它们进行排序,最后他报出了第$k$小的平 ...

  7. Linux配置Selenium+Chrome+Python

    ---恢复内容开始--- 最近一个月没有更新博客了.最近都在复习LINUX与PYTHON知识.决定以后在LINUX环境下学习新知识. 包括后期的框架学习与平台知识方面. 直接记录今天下午的学习成果. ...

  8. Intel CPUs

    http://en.wikipedia.org/wiki/Intel_cpus List of Intel Atom microprocessors List of Intel Xeon microp ...

  9. 算法中时间复杂度概括——o(1)、o(n)、o(logn)、o(nlogn)

    在描述算法复杂度时,经常用到 o(1), o(n), o(logn), o(nlogn) 来表示对应算法的时间复杂度, 这里进行归纳一下它们代表的含义:这是算法的时空复杂度的表示.不仅仅用于表示时间复 ...

  10. Python笔记(十一)_匿名函数与map()、filter()

    匿名函数 无需显式定义函数名,和函数过程,使代码更精简的lambda表达式 函数没有命名,不用担心函数名的冲突 冒号前面代表函数的参数,后面表示计算过程 >>>func=lambda ...