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. wxpython 文本框TextCtrl

    path_text = wx.TextCtrl(frame, pos=(5, 5), size=(350, 24))最常用的两个函数:path = path_text.GetValue() conte ...

  2. springboot redis操作

    redis五大类型用法 Redis五大类型:字符串(String).哈希/散列/字典(Hash).列表(List).集合(Set).有序集合(sorted set)五种Controller:@Reso ...

  3. Web核心之会话技术Cookie&Session

    什么是会话技术? http协议是无状态协议.为了满足在多次请求之间数据进行交互,推出了会话技术. 会话概念:一次会话,指的是从客户端和服务器建立起连接开始,到客户端或服务器断开连接为止.中间可能进行多 ...

  4. 使用kindeditor直接粘贴本地图片或者是qq截图

    我司需要做一个需求,就是使用富文本编辑器时,不要以上传附件的形式上传图片,而是以复制粘贴的形式上传图片. 在网上找了一下,有一个插件支持这个功能. WordPaster 安装方式如下: 直接使用Wor ...

  5. Python基础教程(016)--Python2和Python3的介绍

    前言 Python2和Python3的区别 内容 Python3是现在和未来的主要版本 Python3没有考虑向下兼容. 官方提供了一个Python过度版本Python2.6 Python2.6及支持 ...

  6. paper 158:CNN(卷积神经网络):Dropout Layer

    Dropout作用 在hinton的论文Improving neural networks by preventing coadaptation提出的,主要作用就是为了防止模型过拟合.当模型参数较多, ...

  7. 对于vue绑定的model值里边get和set的小动作

    先看下例子: template里边内容: <el-form-item label="导航条类型"> <el-radio-group v-model="n ...

  8. 嵌入式开发环境搭建(一) 虚拟机实现桥接Ethernet网口 并且通过WIFI进行NAT联网

    背景: 目前手头上有一块JZ2440的板子,之前有搭建完整套开发环境,由于虚拟机故障需要从新搭建服务器端,故在此记录搭建步骤 环境: Ubuntu16.4 VMWare 12 先行条件: 先按照自定义 ...

  9. 单例模式@Singleton在测试中的运用

    前言 单例模式是一种比较常用的设计模式,目的是:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 测试种可能用到的场景 : 在很多时候,有些对象我们希望在整个程序只有一个实例,如线程池.数据库连 ...

  10. Elasticsearch后台运行步骤

    Elasticsearch后台运行步骤 1.cmd 到elasticsearch 中bin目录下 2.elasticsearch-service 出现  3.安装服务 elasticsearch-se ...