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. bzoj4182 Shopping 点分治+单调队列优化多重背包

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4182 题解 有一个很直观的想法是设 \(dp[x][i]\) 表示在以 \(x\) 为根的子树 ...

  2. Activity(工作流-1)

    1.activity自带数据表的含义(23张表) (1)资源库流程规则表 1)act_re_deployment 部署信息表 2)act_re_model  流程设计模型部署表 3)act_re_pr ...

  3. Vue-cli 项目设置每个页面标题

    页面标题 在vue-router页面配置中添加meta的title信息,配合vue-router的beforeEach注册一个前置守卫用户获取到页面配置的title const title = '移动 ...

  4. vue中路由传参的方式

    一.params的类型: 配置路由格式: /router/:id 传递的方式: 在path后面跟上对应的值 传递后形成的路径: /router/123, /router/abc 通过:to字符串拼接的 ...

  5. 03 spring security执行流程分析

    spring security主要是依赖一系列的Filter来实现权限验证的,责任链设计模式是跑不了的.下面简单记录一下spring操作这些Filter的过程. 1. WebSecurityConfi ...

  6. Java反射学习-4 - 反射调用方法

    反射调用方法: package cn.tx.reflect; import java.lang.reflect.Constructor; import java.lang.reflect.Method ...

  7. php获取linux服务器CPU、内存、硬盘使用率的实现代码

    define("MONITORED_IP", "172.16.0.191"); //被监控的服务器IP地址 也就是本机地址 define("DB_SE ...

  8. 【原】webpack--loaders,主要解释为什么需要loaders和注意事项

    Why需要loaders? webpack开箱即用只支持JS和JSON两种文件类型,但是比如css.less,还有目前市场上比较新的语法糖jsx,怎么处理呢? 通过Loaders去支持其他文件类型并且 ...

  9. 老牌激活工具– Microsoft Toolkit 2.4.3 + 详细图文教程【转】

    老牌激活工具-- Microsoft Toolkit 2.4.3 + 详细图文教程 windowsToolkit是一个一键激活MS Office 2010的工具.原理就是利用KMS来激活,不是新的激活 ...

  10. jenkins实现master变化时,才触发构建(过滤分支)

    现状:现在是这样的,每个开发push时,都触发jenkins进行构建 期望:只有当代码被push到master时才进行构建 (根据使用的git平台)做这些配置需要先了解一些概念: (github) p ...