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 ...
随机推荐
- 苹果的AR赌注仍然有很多需要证明的
苹果公司为开发者主题发布会做准备,其中一个更大的公告很可能是其增强现实平台的新变化.自从去年宣布ARKit以来,这家科技巨头几乎对其对AR的潜力抱有信心. 在很多讨论背后,人们都相信技术的实用性,但在 ...
- ThinkingRock:使用方法
摘自:http://www.mifengtd.cn/articles/how_to_use_thinkingrock.html 不使用Thinkingrock的朋友,也可以看看.因为在处理(Proce ...
- Bootstrap的本地引入
今天用前端框架时选择了Bootstrap,然后东西都下好了本地就是引入不进去. 查了一下发现必须jquery要在BootStrap之前引入,然后我更改了引入顺序,发现还是不行 <script s ...
- 命令查看当前运行APP的包名和Activity
先用usb链接手机 启动要查看的程序,命令查看当前运行的包名和Activity更清晰. 使用adb shell dumpsys window | findstr mCurrentFocus 命令查看 ...
- CoffeeScript编写简单新闻页(仅UI)
CoffeeScript编写简单新闻页(仅UI) 1. 配置(在公司搭建好的环境下配置) omnisocials-backend/src/backend/modules/member/config/m ...
- sonarqube6.7.1使用
1.插件安装 方法1.登入sonarqube-web安装 admin/admin 配置--应用市场--全部 英文片:administration--configuration--marketplace ...
- [NOIP2015]子串 题解
题目描述 有两个仅包含小写英文字母的字符串A和B. 现在要从字符串A中取出k个互不重叠的非空子串,然后把这 k 个子串按照其在字符串 A 中出现的顺序依次连接起来得到一个新的字符串,请问有多少种方案可 ...
- 重温HTML和CSS3
重温Web前端基础 本篇幅中着重文字,只是记录一些自己的见解,巩固下自身基础 网页结构是什么? 结构层 html 导航,列表,段文字,图片,链接,表示层 css 颜色,大小,位置,行为层 JavaSc ...
- Majordomo Info VGER.KERNEL.ORG
This is VGER.KERNEL.ORG Majordomo Info The mission of vger.kernel.org is to provide email list servi ...
- linux 修改系统字符集,查看字符
修改系统字符集 # cd /etc/sysconfig # vi i18n -------------------文件内容------------------ LANG="zh_CN.GB1 ...