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. 苹果的AR赌注仍然有很多需要证明的

    苹果公司为开发者主题发布会做准备,其中一个更大的公告很可能是其增强现实平台的新变化.自从去年宣布ARKit以来,这家科技巨头几乎对其对AR的潜力抱有信心. 在很多讨论背后,人们都相信技术的实用性,但在 ...

  2. ThinkingRock:使用方法

    摘自:http://www.mifengtd.cn/articles/how_to_use_thinkingrock.html 不使用Thinkingrock的朋友,也可以看看.因为在处理(Proce ...

  3. Bootstrap的本地引入

    今天用前端框架时选择了Bootstrap,然后东西都下好了本地就是引入不进去. 查了一下发现必须jquery要在BootStrap之前引入,然后我更改了引入顺序,发现还是不行 <script s ...

  4. 命令查看当前运行APP的包名和Activity

    先用usb链接手机 启动要查看的程序,命令查看当前运行的包名和Activity更清晰. 使用adb shell dumpsys window | findstr mCurrentFocus  命令查看 ...

  5. CoffeeScript编写简单新闻页(仅UI)

    CoffeeScript编写简单新闻页(仅UI) 1. 配置(在公司搭建好的环境下配置) omnisocials-backend/src/backend/modules/member/config/m ...

  6. sonarqube6.7.1使用

    1.插件安装 方法1.登入sonarqube-web安装 admin/admin 配置--应用市场--全部 英文片:administration--configuration--marketplace ...

  7. [NOIP2015]子串 题解

    题目描述 有两个仅包含小写英文字母的字符串A和B. 现在要从字符串A中取出k个互不重叠的非空子串,然后把这 k 个子串按照其在字符串 A 中出现的顺序依次连接起来得到一个新的字符串,请问有多少种方案可 ...

  8. 重温HTML和CSS3

    重温Web前端基础 本篇幅中着重文字,只是记录一些自己的见解,巩固下自身基础 网页结构是什么? 结构层 html 导航,列表,段文字,图片,链接,表示层 css 颜色,大小,位置,行为层 JavaSc ...

  9. Majordomo Info VGER.KERNEL.ORG

    This is VGER.KERNEL.ORG Majordomo Info The mission of vger.kernel.org is to provide email list servi ...

  10. linux 修改系统字符集,查看字符

    修改系统字符集 # cd /etc/sysconfig # vi i18n -------------------文件内容------------------ LANG="zh_CN.GB1 ...