<!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点击元素变色兄弟元素不变色的更多相关文章

  1. UI自动化通过文字、父子元素，兄弟元素定位

    在百度首页,通过文字,父子元素,兄弟元素进行定位 一.文字定位: 通过界面上的文字进行定位,注意如果同一个页面上存在多个同样的文字的情况,返回的值会是多个,建议只存在一个情况下才用这方法. 如:定位百 ...

  2. jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素

    <!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv ...

  3. Javascript JQuery获取当前元素的兄弟元素/上一个/下一个元素（转）

    var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s的下一个 ...

  4. 转载：js和jquery获取父级元素、子级元素、兄弟元素的方法

    转载网址: 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元 ...

  5. stylus选中hover元素的兄弟元素下的子元素

    stylus设置兄弟元素样式:鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ . ...

  6. js和jquery获取父级元素、子级元素、兄弟元素的方法{转}

    先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当成DOM元素   原生的 ...

  7. [2018-01-12] jquery获取当前元素的兄弟元素

    $('#id').siblings() 当前元素所有的兄弟节点$('#id').prev() 当前元素前一个兄弟节点$('#id').prevaAll() 当前元素之前所有的兄弟节点$('#id'). ...

  8. jquery查找子元素和兄弟元素

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. js和jquery获取父级元素、子级元素、兄弟元素的方法

    最近工作中总遇到取各种父啊子啊兄弟姐妹啊,每次都得查,这次整理个全乎的~ [js的获取方式] function dom(){      var a = document.getElementByIdx ...

随机推荐

  1. C# Autofac集成之Framework WebAPI

    Web API 2集成需要Autofac.WebApi2 NuGet包. Web API集成需要Autofac.WebApi NuGet包. Web API集成为控制器,模型绑定器和操作过滤器提供了依 ...

  2. jQuery的JS库在本地运行项目时提示无法加载

    最近公司有个项目在我本地运行时引用本地的jquery.js,浏览器提示无法加载 <script src="/js/newperson/jquery-1.11.3.min.js" ...

  3. [CocoaPods]使用CocoaPods进行测试

    测试规格 从CocoaPods 1.3.0开始,pod现在可以提供测试规范(或简称测试规范).测试规范可用于描述给定pod的测试源. 这是一个示例CoconutLib.podspec,一个定义测试规范 ...

  4. C语言中几个常用数学计算函数ceil(), floor(), round()的用法

    最近在实现算法的过程中,遇到了使用几个数学计算函数,感觉挺有意思,就记下来 方便以后使用. ceil(x)返回不小于x的最小整数值(然后转换为double型). floor(x)返回不大于x的最大整数 ...

  5. python中stack在实际中的简单应用之平衡符号

    很多书籍都在讲stack的概念和使用方法,等我们把概念熟悉后,发现不知道在什么场景下使用 该结构体,这里就列几个实用的例子,让大家了解一下stack在实际中的用处和厉害之处. 由于stack中的特点是 ...

  6. 排序算法系列：快速排序算法JAVA版（靠谱、清晰、真实、可用、不罗嗦版）

    在网上搜索算法的博客,发现一个比较悲剧的现象非常普遍: 原理讲不清,混乱 啰嗦 图和文对不上 不可用,甚至代码还出错 为了不误人子弟耽误时间,推荐看一些靠谱的资源,如[啊哈!算法]系列: https: ...

  7. springboot + mybatis

    这两天启动了一个新项目因为项目组成员一直都使用的是mybatis,虽然个人比较喜欢jpa这种极简的模式,但是为了项目保持统一性技术选型还是定了 mybatis.到网上找了一下关于spring boot ...

  8. 使用 Portainer UI 管理 Docker 主机

    Docker 使用命令行的方式来管理有时候并没有那么直观,可以使用 Portainer 的 UI 来管理 Docker 主机和 Docker Swarm 集群. 安装 Portainer 环境:cen ...

  9. mongodb数据库添加权限及简单数据库命令操作笔记

    加固mongodb建议:修改数据库默认端口,添加数据库访问权限: 启动数据库(裸奔):C:\mongodb\bin>mongod --dbpath C:\MongoDB\data(同时用--db ...

  10. Android并发编程 多线程与锁

    该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,如果能给各位看官带来一丝启发或者帮助,那真是极好的. 前言 前一篇Android并发编程开篇呢,主要是简单介绍一下线程以及 ...