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. k8s-calico【转载】

    环境 系统:centos7.3192.168.40.50 local-master192.168.40.51 local-node1192.168.40.52 local-node2 master: ...

  2. 【转】跨域资源共享 CORS 详解

    本文来源:http://www.ruanyifeng.com/blog/2016/04/cors.html 阮一峰老师的网络日志 CORS是一个W3C标准,全称是"跨域资源共享"( ...

  3. Linux服务的安装与使用

    Spotlight on Unix 监控Linux服务器的安装与使用 详细请看:https://spotlight-on-unix.software.informer.com/download/#do ...

  4. DOS基础使用专题(强烈推荐)

    DOS基础使用专题(强烈推荐) 美丽的DOS时代 DOS是世界上使用人数最多的操作系统,包括上面的Win3.x/9x等GUI操作平台的用户.尽管许多人由于种种原因而使用了其它非DOS的操作系统或操作环 ...

  5. 540D - Bad Luck Island(概率DP)

    原题链接:http://codeforces.com/problemset/problem/540/D 题意:给你石头.剪刀.布的数量,它们之间的石头能干掉剪刀,剪刀能干掉布,布能干掉石头,问最后石头 ...

  6. k-近邻算法(kNN)笔记

    #mat()函数可以将数组(array)转化为矩阵(matrix)# randMat = mat(random.rand(4,4))# 求逆矩阵:randMat.I# 存储逆矩阵:invRandMat ...

  7. Delphi读取和写入utf-8编码格式的文件

    读取UTF-8格式的文件内容 function LoadUTF8File(AFileName: string): string; var ffileStream:TFileStream; fAnsiB ...

  8. LOJ 3124 「CTS2019 | CTSC2019」氪金手游——概率+树形DP

    题目:https://loj.ac/problem/3124 看了题解:https://www.cnblogs.com/Itst/p/10883880.html 先考虑外向树. 考虑分母是 \( \s ...

  9. TCP/IP协议 和 如何实现 互联网上点对点的通信

    1.参考:https://www.cnblogs.com/onepixel/p/7092302.html   TCP/IP 协议采用4层结构,分别是应用层.传输层.网络层 和 链路层   http 属 ...

  10. Linux用户空间与内核地址空间

    Linux 操作系统和驱动程序运行在内核空间,应用程序运行在用户空间,两者不能简单地使用指针传递数据,因为Linux使用的虚拟内存机制,用户空间的数据可能被换出,当内核空间使用用户空间指针时,对应的数 ...