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 ...
随机推荐
- hadoop2.4.0伪分布式搭建以及分布式关机重启后datanode没起来的解决办法
1.准备Linux环境 1.0点击VMware快捷方式,右键打开文件所在位置 -> 双击vmnetcfg.exe -> VMnet1 host-only ->修改subnet ip ...
- Vmware Vtop基本使用
俗话说:"最了解孩子的莫过于亲妈",算了编不下去了,简而言之就是我们想知道虚机的详情可以通过Vmware Vtop登录宿主机进行查看,直接上干货. 有这些信息我们可以从Vt ...
- 用 Docker 构建、运行、发布来一个 Spring Boot 应用
本文演示了如何用 Docker 构建.运行.发布来一个 Spring Boot 应用. Docker 简介 Docker 是一个 Linux 容器管理工具包,具备“社交”方面,允许用户发布容器的 im ...
- cant found Microsoft.VSSDK.BuildTools.15.0.26201
如果在vs扩展开发中出现 严重性 代码 说明 项目 文件 行 禁止显示状态 错误 Failed to load 'C:\程序\EncodingNormalior\packages\Microsoft. ...
- 牛客JS编程大题（一）
1.找出元素 item 在给定数组 arr 中的位置 function indexOf(arr,item){ return arr.indexOf(item);} 2.计算给定数组 arr 中所有元素 ...
- maya2014卸载/安装失败/如何彻底卸载清除干净maya2014注册表和文件的方法
maya2014提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装maya2014失败提示maya2014安装未完成,某些产品无法安装,也有时候想重新安装maya ...
- 3.复杂的viewpager
实现这样的效果: 1.主页面布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&quo ...
- MySQL：字符串字段加索引
1. 使用方式 1.1 全字段加索引 给整个字段加索引,索引存储整个字段的值. 数据量较小时,查询成本高,准确度高: 数据量较大时,比较耗费空间: 1.2 前缀索引 MySQL支持前缀索引,可以定义字 ...
- ASP.NET Web API实现微信公众平台开发（一）服务器验证
最近朋友的微信公众号准备做活动,靠固定的微信公众平台模版搞定不了,于是请我代为开发微信后台.鉴于我也是第一次尝试开发微信后台,所以也踩了不少坑,此系列博客将会描述微信公众号各项功能的实现. 先决条件 ...
- Unity 处理预设中的中文
Unity 处理预设中的中文 需求由来 项目接入越南版本 需要解决的文本问题 获取UI预设Label里面的中文(没被代码控制)提供给越南 Label里面的中文替换成越南文 解决流程 迭代获取Asset ...