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. Java字符串流学习

    字符串流 定义:字符串流,以一个字符为数据源,来构造一个字符流. 作用:在Web开发中,我们经常要从服务器上获取数据,数据返回的格式通过一个字符串(XML.JSON),我们需要把这个字符串构造为一个字 ...

  2. Python 石头 剪刀 布

    di = {1: '石头', 2: '剪刀', 3: '布'} def win(x, y): if len({x[0], y[0]}) == 1: print('平局.') else: if {x[0 ...

  3. spark的知识的链接

    IDEA 创建scala spark的Mvn项目:https://blog.csdn.net/u014646662/article/details/84618032 Spark详解03Job 物理执行 ...

  4. tensorflow函数介绍(2)

    参考:tensorflow书 1.模型的导出: import tensorflow as tf v1=tf.Variable(tf.constant(2.0),name="v1") ...

  5. DELPHI FMX IOS模拟器调试时出现No SDKs could be found

    解决办法: 在OSX里打开XCODE,​点击XCODE菜单->​Perferences->Locations​在Commond  Line Tools选择XCODE ​

  6. java 随机读写访问流及seek方法

    package stream; import java.io.File; import java.io.FileNotFoundException; import java.io.IOExceptio ...

  7. python中的encode（）和decode（）函数

    前言: 我们知道,计算机是以二进制为单位的,也就是说计算机只识别0和1,也就是我们平时在电脑上看到的文字,只有先变成0和1,计算机才会识别它的意思.这种数据和二进制的转换规则就是编码.计算机的发展中, ...

  8. SyntaxError: missing ] after element list

    在前端页面js报错,找了很久没找到原因. 后来发现是后台向前端输出json字符串,而前端接收是html格式,需要将后台json字符串改成正常字符串就可以输出,或者通过ajax的方式接收json字符串.

  9. LCA 总结

    代码: //RMQ求LCA struct node { int v, w; }; class LCA { private: vector<int>dep, pos, olx, dis; v ...

  10. java并发编程笔记（七）——线程池

    java并发编程笔记(七)--线程池 new Thread弊端 每次new Thread新建对象,性能差 线程缺乏统一管理,可能无限制的新建线程,相互竞争,有可能占用过多系统资源导致死机或者OOM 缺 ...