vue 点击当前元素改变样式
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 点击当前元素改变样式的更多相关文章
- vue点击时动态改变样式 ------- 最简单的方法
vue点击时动态改变样式 template中 <li :class="{ active:index==isActive }" @click="changeValue ...
- vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字
点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址: https://xibushijie.github.io/static/addClass.html &l ...
- vue 点击当前元素添加class 去掉兄弟的class
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改
vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...
- css小记:hover 鼠标滑过让该元素的子元素或者其他元素改变样式
<!DOCTYPE><head><meta http-equiv="Content-Type" content="text/html; ch ...
- Vue点击当前元素添加class 去掉兄弟的class
<div id="app"> <ul> <li v-for="(todo, index) in todos" v-on:click ...
- vue中修改第三方组件的样式不生效
问题 在使用element-ui时,有时候想要修改组件内的样式,但不成功,例如 <div class="test"> <el-button>按钮</e ...
- vue列表渲染,以及鼠标点击改变样式的问题
在实际项目中,我们进场会遇到鼠标点击该表某个DOM元素的样式,在原生的js或者jquery中,我们会比较熟练的实现这个需求,但是在vue中怎么实现呢? 直接操作DOM?NO!NO! 既然我们的项目使用 ...
- Vue在点击内部元素时(获得焦点),怎样让外部div元素样式变化?
问题: div内部有很多元素,div. p. span .input等,各元素有嵌套,现在点击某元素时需要最外面这个div边框高亮,例如,点击了input开始输入 假设html 结构如下 <d ...
随机推荐
- [BZOJ3626] [LNOI2014] LCA 离线 树链剖分
题面 考虑到询问的\(l..r,z\)具有可减性,考虑把询问差分掉,拆成\(r,z\)和\(l-1,z\). 显然这些LCA一定在\(z\)到根的路径上.下面的问题就是怎么统计. 考虑不是那么暴力的暴 ...
- 为什么我们从Angular 2迁移到Vue.js(为什么我们没有选择React)
在Rever(www.reverscore.com),我们刚刚使用Vue.js发布了我们的Web客户端的新版本.经过641次提交和16周的紧张开发,我们非常自豪之前做出的决定.8个月前,我们的前端在使 ...
- python读文件的4种方式
1.直接打开就读 with open('filepath','r') as f: for line in f: print(line) print('一行数据') 虽然f是一个文件实例,但可以通过以上 ...
- SpringBoot---Favicon配置
1.概述 1.1.SpringBoot提供了一个默认的Favicon,每次访问都能看到: 2.关闭Favicon 在application.yml中设置关闭Favicon,默认开启: spring.m ...
- Cloudera Hadoop 环境搭建(离线安装)
关于CDH和Cloudera Manager CDH (Cloudera's Distribution, including Apache Hadoop),是Hadoop众多分支中的一种,由Cloud ...
- php htmlspecialchars()函数 语法
php htmlspecialchars()函数 语法 作用:函数把预定义的字符转换为 HTML 实体.预定义的字符有:& (和号)成为 &," (双引号)成为 " ...
- 在Windows系统使用Gpg4win进行加密解密
GPG,又称为GnuPG,全称是Gnu Private Guard,即GNU隐私卫士.GPG是以PGP算法为核心的强大的加密软件.但GPG项目是一套命令行程序,而且是为 Linux 等开源操作系统设计 ...
- Unity Shader之模板测试
Unity Shader之模板测试 一沙一世界,一花一天堂 一.Stencil testing 渲染管线 当片段着色器处理完一个片段之后,模板测试(Stencil Test)会开始执行,和深度 ...
- bzoj 1233: [Usaco2009Open]干草堆tower 【想法题】
首先这题的$n^3$的DP是比较好想的 $f[i][j]$表示用前$i$包干草 且最顶层为第$j+1$包到第$i$包 所能达到的最大高度 然而数据范围还是太大了 因此我们需要去想一想有没有什么单调性 ...
- 从单片机到系统之--uboot启动arm linux
UBOOT官网下载地址:http://ftp.denx.de/pub/u-boot/ 很详细的UBOOT解释: https://www.crifan.com/files/doc/docbook/ubo ...