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. ubuntu 彻底删除软件

    无法获取 dpkg 前端锁 解决办法如下:1.终端输入 ps  aux ,列出进程.找到含有apt-get的进程,直接sudo kill PID. 2.强制解锁,命令sudo rm /var/cach ...

  2. vmware版本选择

    vmware哪个版本好用 2014-03-10 22:59一枚小白3 | 分类:常见软件 | 浏览6743次 准备装ghost xp,想问下哪个版本更适合?或者现在哪个版本更稳定,求不要复制,求大神解 ...

  3. RabbitMQ:伪延时队列

    目录 一.什么是延时队列 二.RabbitMQ实现 三. 延时队列的问题 四.解决RabbitMQ的伪延时方案 ps:伪延时队列先卖个关子,我们先了解下延时队列. 一.什么是延时队列 所谓延时队列是指 ...

  4. Mac OS 10.15系统入门教程 系统语言输入法详解

    对于一些Mac新手来说呢还不知道偏好设置到底是什么?有什么用处?其实Mac系统内的几乎所有的系统相关的设置都会在系统偏好设置内出现. 切换系统语⾔在语言与地区设置中拖拽左侧的语言条目就可以切换系统的语 ...

  5. contentSize,contentOffset,contentInset整理

    参考:https://blog.csdn.net/yyyyccll/article/details/71173150

  6. ElasticSearch学习文档2018.11

    1       Elasticsearch安装 1.1    ES6.0版本安装head插件 1.1 下载head插件 下载地址:https://github.com/mobz/elasticsear ...

  7. ADSL(Asymmetric Digital Subscriber Loop)技术

    上行带宽,下行带宽 宽带上行下行是指一般ADSL上网方式上行与下行速率,上行就是从电脑上传的速度,下行就是从网络上的主机下载速度,一般下行速率比较高! ADSL(Asymmetric Digital ...

  8. KVM(多电脑切换器)

    KVM:Keyboard Video Mouse的缩写.KVM 交换机通过直接连接键盘.视频和鼠标 (KVM) 端口,让您能够访问和控制计算机.KVM 技术无需目标服务器修改软件.这就意味着可以在 W ...

  9. 某些 UI效果 实现思路

    一.日历组件: https://blog.csdn.net/amork/article/details/7257212 二.瀑布流 三.轮播图:轮播图已经用的很多了,结构也简单就不去将了. 四.分页组 ...

  10. Codeforces Round #506 (Div. 3) E

    Codeforces Round #506 (Div. 3) E dfs+贪心 #include<bits/stdc++.h> using namespace std; typedef l ...