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 ...
随机推荐
- springmvc中拦截器配置格式
对于springmvc,有两种方式配置拦截器. 一是实现HandlerInterceptor接口,如 public class MyInterceptor1 implements HandlerInt ...
- 【leetcode】1012. Complement of Base 10 Integer
题目如下: Every non-negative integer N has a binary representation. For example, 5 can be represented a ...
- Setting proxy for Windows CMD and Linux Terminal
setting proxy for Windows CMD and Linux Terminal Linux Terminal: set http_proxy=http://127.0.0.1:811 ...
- HttpClient之EntityUtils工具类
今天看到tttpclient-tutorial上面有这样一句话-----非常的不推荐使用EntityUtils,除非知道Entity是来自可信任的Http Server 而且还需要知道它的最大长度.文 ...
- bootstrap 点击模态框上的提交按钮后,模态框不能关闭的解决办法
项目问题如下图, 点击确定后,模态框没反应,按理,点击删除按钮时,弹出确认删除的模态框,点击确定后,使用ajax请求服务器,把数据库中对应的数据进行删除,根据服务器 servlet返回的状态值(del ...
- php strcasecmp()函数 语法
php strcasecmp()函数 语法 作用:比较两个字符串(不区分大小写)直线电机驱动器 语法:strcasecmp(string1,string2) 参数: 参数 描述 string1 必须, ...
- POJ 3481 Double Queue (treap模板)
Description The new founded Balkan Investment Group Bank (BIG-Bank) opened a new office in Bucharest ...
- flutter中的路由跳转
在前面的基本路由和命名路由中,都演示了如何进行路由跳转,并且在路由跳转以后,可以借用系统自带的按钮就行返回上一级,当然了,也可以自定义按钮返回上一级. 返回上一级 在前面的例子中,当从Home.dar ...
- 记录一些比较长的adb命令,复制用
adb shell content query --uri content://settings/secure --projection value --where "name=\'andr ...
- UITableView 支持左右滑动(二)
原理: 用tableView其中一个cell 来展示一个 UIScrollView, 在scrollview上很像放置子tableView 注意点: 外层tableView需要实现手势代理 /* 若重 ...