vue点击元素变色兄弟元素不变色
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>点击变色，兄弟元素不变色</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.color{
color: red;
}
</style>
<body>
<div id="app">
<ul>
<li :class="{color: list.checked}" @click="click_btn(list, index)" v-for="(list, index) in arr" :key="index">
-------- {{list.name}} --------
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
color_red: true,
arr: [
{
name: '111111',
checked: false
},
{
name: '2222222222',
checked: false
},
{
name: '333333333',
checked: false
}
]
},
methods: {
click_btn: function (list, index) {
var this_1 = this
console.log(list)
for(var i in this_1.arr){
if( i == index){
this_1.arr[i].checked = true
}else{
this_1.arr[i].checked = false
}
}
console.log(this_1.arr)
}
},
mounted() { }
})
</script>
</body> </html>
vue点击元素变色兄弟元素不变色的更多相关文章
- UI自动化通过文字、父子元素，兄弟元素定位
在百度首页,通过文字,父子元素,兄弟元素进行定位 一.文字定位: 通过界面上的文字进行定位,注意如果同一个页面上存在多个同样的文字的情况,返回的值会是多个,建议只存在一个情况下才用这方法. 如:定位百 ...
- jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素
<!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv ...
- Javascript JQuery获取当前元素的兄弟元素/上一个/下一个元素（转）
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s的下一个 ...
- 转载：js和jquery获取父级元素、子级元素、兄弟元素的方法
转载网址: 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元 ...
- stylus选中hover元素的兄弟元素下的子元素
stylus设置兄弟元素样式:鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ . ...
- js和jquery获取父级元素、子级元素、兄弟元素的方法{转}
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当成DOM元素 原生的 ...
- [2018-01-12] jquery获取当前元素的兄弟元素
$('#id').siblings() 当前元素所有的兄弟节点$('#id').prev() 当前元素前一个兄弟节点$('#id').prevaAll() 当前元素之前所有的兄弟节点$('#id'). ...
- jquery查找子元素和兄弟元素
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- js和jquery获取父级元素、子级元素、兄弟元素的方法
最近工作中总遇到取各种父啊子啊兄弟姐妹啊,每次都得查,这次整理个全乎的~ [js的获取方式] function dom(){ var a = document.getElementByIdx ...
随机推荐
- Adobe reader multiple languages pack
用户打开客户发过来的PDF文档,显示不正常,这是电脑的Adobe Reader缺少相关的字体. 可以从下面地址下载相对版本的字体包安装:http://supportdownloads.adobe.co ...
- maya2014卸载/安装失败/如何彻底卸载清除干净maya2014注册表和文件的方法
maya2014提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装maya2014失败提示maya2014安装未完成,某些产品无法安装,也有时候想重新安装maya ...
- jQuery判断复选框checkbox的选中状态
通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...
- Swift5 语言指南(七) 集合类型
Swift提供三种主要的集合类型,称为数组,集合和字典,用于存储值集合.数组是有序的值集合.集是唯一值的无序集合.字典是键值关联的无序集合. Swift中的数组,集合和字典总是清楚它们可以存储的值和键 ...
- 分布式任务调度系统xxl-job源码探究（二、服务中心）
接下来看下服务端代码 服务端源码 服务端通过管理quartz定时任务组件,分发任务 先从入口看起,由web.xml进入,可以看出,自己编写的代码从applicationcontext-xxl-job- ...
- iOS-SVProgressHUDMaskType
SVProgressHUDMaskTypeNone:默认图层样式,当HUD显示的时候,允许用户交互. SVProgressHUDMaskTypeClear:当HUD显示的时候,不允许用户交互. ...
- 21天打造分布式爬虫-Spider类爬取糗事百科（七）
7.1.糗事百科 安装 pip install pypiwin32 pip install Twisted-18.7.0-cp36-cp36m-win_amd64.whl pip install sc ...
- .net core内部分享ppt
Microsoft .NET 自 2002 年发行 v1.0 以来,已经过了近 14 个年头,在这 14 年里面,.NET 日渐成熟并成为 Microsoft 的重要开发平台之一,只要是在 Windo ...
- 05-TypeScript中的方法新功能（下）
再TypeScript中,方法还有一些新功能能够让我们更好的控制方法执行. 1.Generator方法: yield关键字用于控制方法在执行的时候暂停住,后续方法调用方又可以从暂停的地方继续执行,这种 ...
- Eclipse 工程目录下的.classpath、.project文件和.settings文件作用
1..classpath 定义了你这个项目在编译时所使用的$CLASSPATH (注: 每次在更新jar的版本或者增加jar之后,请在SVN提交.classpath文件,否则工程的build path ...