<!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# 多线程 举例使用

    使用多线程的几种方式 (1)不需要传递参数,也不需要返回参数 ThreadStart是一个委托,这个委托的定义为void ThreadStart(),没有参数与返回值.   /// <summa ...

  2. Centos 执行top命令详细解读

    1.作用:top命令用来显示执行中的程序进程,使用权限是所有用户. 2.格式:top [-] [d delay] [q] [c] [S] [s] [i] [n] 3.主要参数: d:指定更新的间隔,以 ...

  3. 项目Alpha冲刺（团队3/10）

    项目Alpha冲刺(团队3/10) 团队名称: 云打印 作业要求: 项目Alpha冲刺(团队) 作业目标: 完成项目Alpha版本 团队队员 队员学号 队员姓名 个人博客地址 备注 221600412 ...

  4. Flask 中的路由系统

    基本用法 Django的路由系统url集中在一起,而Flask的路由系统以装饰器的形式装饰在视图上如: @app.route("/",methods=["GET" ...

  5. 从零开始的程序逆向之路 第一章——认识OD(Ollydbg)以及常用汇编扫盲

    作者:Crazyman_Army 原文来自:https://bbs.ichunqiu.com/thread-43041-1-1.html 0×00 序言: 1.自从上次笔者调戏完盗取文件密码大黑客后, ...

  6. [CocoaPods]pod安装与pod更新

    简介 许多以CocoaPods开头的人似乎认为pod install只在第一次使用CocoaPods设置项目时使用,pod update之后才会使用.但事实并非如此. 本指南的目的是解释何时使用pod ...

  7. linux 软件安装篇

    在linux下安装软件,不像windows一样,下一步下一步安装,但是也有很方便的方式.也有自定义的安装方式,总体来说,套路还不算太深,但是要实践才能出真知哦! linux版本有很多,但是大部分命令都 ...

  8. Spring Boot --- Swagger基本使用

    1. pom <!-- swagger2 --> <dependency> <groupId>io.springfox</groupId> <ar ...

  9. Ubuntu 16.04 安装 arm-linux-gcc 交叉编译工具

    工作需要,最近在编译linux嵌入式内核时,需要安装arm-linux-gcc交叉编译,实际上,安装这个交叉编译器的难度没啥.不过,这里有些问题还是值得我去思考和记录下来的. 这个系统的上的编译器用的 ...

  10. MySQL Workbench导出Model提示['ERROR 1064 (42000): You have an error in your SQL syntax....syntax to use near 'VISIBLE']

    CREATE TABLE IF NOT EXISTS `pihealth`.`warning_events` ( `wid` INT NOT NULL AUTO_INCREMENT, `wtime` ...