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 ...
随机推荐
- ansible hosts文件编写，简单使用测试（普通用户、sudo用户、root用户登录权限测试）
一.配置文件修改: 1.备份原配置文件: cp /etc/ansible/hosts /etc/ansible/hosts.bak 2.修改hosts配置文件: cat <<EOF> ...
- [算法专题] Binary Tree
1 Same Tree https://leetcode.com/problems/same-tree/ Given two binary trees, write a function to che ...
- 剑指offer编程题Java实现——面试题10二进制中1的个数
题目: 请实现一个函数,输入一个整数,输出该整数二进制表示中1的个数.例如,把9表示成二进制是1001,有2位是1,该函数输出2解法:把整数减一和原来的数做与运算,会把该整数二进制表示中的最低位的1变 ...
- Cordova - IOS浏览器里面数字被当做电话号码
网页上有连续超过5个数字,ios浏览器就会当做手机号码,如果某行文字有颜色,那么这个连续的数字就没颜色,变黑色了. 解决方法:在html页面头部加入下面代码 <meta name="f ...
- Flask中的before_request after_request
1.@app.before_request 在请求(request)之前做出响应 @app.before_request 也是一个装饰器,他所装饰的函数,都会在请求进入视图函数之前执行 2.@app. ...
- Javascript高级编程学习笔记（12）—— 引用类型（1）Object类型
前面的文章中我们知道JS中的值分为两种类型 基础类型的值和引用类型的值 基础类型的值我已经大概介绍了一下,今天开始后面几天我会为大家介绍一下引用类型的值 Object类型 对象是引用类型的值的实例,在 ...
- 1，rocketmq 的原理与安装教程
参考文档 http://blog.csdn.net/a19881029/article/details/34446629 https://github.com/alibaba/RocketMQ htt ...
- Java序列化技术即将被废除！！！
我们的对象并不只是存在内存中,还需要传输网络,或者保存起来下次再加载出来用,所以需要Java序列化技术.Java序列化技术正是将对象转变成一串由二进制字节组成的数组,可以通过将二进制数据保存到磁盘或者 ...
- Python——破解极验滑动验证码
极验滑动验证码 以上图片是最典型的要属于极验滑动认证了,极验官网:http://www.geetest.com/. 现在极验验证码已经更新到了 3.0 版本,截至 2017 年 7 月全球已有十六万家 ...
- 如何开始DDD(续)
上一篇针对用户注册案例简单介绍了如何使用 DDD,接下来我将继续针对这个例子做一下补充.先将User模型丰富起来,因为目前看上去他和贫血模型还没有啥大的区别. 首先还是由领域专家来说明业务,他提出了用 ...