<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 循环为选中的li列表添加效果</title>
</head>
<style>
    li{
        list-style: none;
    }
    .active {
        background: rgba(135, 135, 135, 0.74);
        width: 20%;
        color: #eee;
    }
</style>
<body>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

<div id="app">
    <ul>
    <li v-for='(data,key,index) in data' @click="addClassFun(index)"
       v-bind:class='{active:index==classID}'>
        {{data.data}}</li>
    </ul>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            data: {
                data1: {
                    data: "测试1",
                    ifAdd: 0
                },
                data2: {
                    data: "测试2",
                    ifAdd: 1
                },
                data3: {
                    data: "测试3",
                    ifAdd: 2
                }
            },
            classID: "0"
        },
       mounted(){
            $("ul li:first-child").addClass('active');//第一个默认选中
      },
        methods: {
            addClassFun: function (index) {
                this.classID = index;
           $("ul li:first-child").removeClass('active'); 切换的时候第一个不要选中
            }
        }
    })
</script>
</body>
</html>

Vue 循环为选中的li列表添加效果的更多相关文章

  1. vue实现购物清单列表添加删除

    vue实现购物清单列表添加删除 一.总结 一句话总结: 基础的v-model操作,以及数组的添加(push)删除(splice)操作 1.checkbox可以绑定数组,也可以直接绑定值? 绑定数组就是 ...

  2. jquery 动态添加和删除 ul li列表

    今天需要实现一个jquery动态添加和删除  ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  3. li列表循环滚动的简单方法,无需插件,简单方法搞定

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

  4. bootstrap列表添加滚动条

    有时候列表中数据过多,导致超出页面,影响视觉感受.这时我们需要添加一个滚动条. 初始状态如图: 代码如下: <ul class="list-group"> <li ...

  5. Vue slot 插槽用法：自定义列表组件

    Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...

  6. Vue中组件化编码 完成任务的添加、删除、统计、勾选需求（实战练习三完结）

    上一个章节实现数据在组件之间的传递 .这一章主要是完成添加任务到任务栏.删除任务栏.统计任务完成情况.主要还是参数在各个组件之间的传递. 上一章节的链接地址:https://blog.csdn.net ...

  7. 给li标签添加自定义属性

    给li标签添加属性<ul> <li></li> <li></li> <li></li> <li>< ...

  8. python 如何在一个for循环中遍历两个列表

    是我在看<笨方法学python>过程中发现有一行代码看不懂--" for sentence in snippet, phrase:",所以研究了半天,感觉挺有收获的.所 ...

  9. 🍓 vue循环渲染本地图片不显示？ 🍓

    teamList: [{ title: '大数据拍牌', imgUrl: './img/data.jpg', introduce: '5星服务:强烈推荐', cost: '15000', bail: ...

随机推荐

  1. 【水滴石穿】rnTest

    其实就是一个小的demo,不过代码分的挺精巧的 先放地址:https://github.com/linchengzzz/rnTest 来看看效果 确实没有什么可以说的,不过代码部分还行 先入口文件 / ...

  2. ios开发ARC，IBOutlets之strong与weak

    今天在写程序的时候,用IBOutlets连了一个自定义的控件,出现了问题,后面访问的时候,控件里有些subviews没有初始化好,取到的时候为nil, 程序里用了ARC, IBOutlets一连接上, ...

  3. 成功的背后！（送给所有IT人）

    希望自己迷茫的时候,看到能够惊醒 来自CSDN第3名的博主(http://blog.csdn.net/phphot/article/details/2187505) 成功的背后,有着许多不为人知的故事 ...

  4. Directx11教程(63) tessellation学习(5)

    原文:Directx11教程(63) tessellation学习(5)        TS中生成细分后顶点的u,v,{w}坐标,我们根据控制点和u,w,{w}坐标生成新的顶点位置,在前面四边形的细分 ...

  5. display: none;、visibility: hidden、opacity=0区别总结

    display: none; 1.浏览器不会生成属性为display: none;的元素. 2.display: none;不占据空间(毕竟都不熏染啦),所以动态改变此属性时会引起重排. 3.disp ...

  6. JavaScript--自调用函数(小闭包)

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

  7. swiper踩过的哪些坑

    最近,苦恼于各种轮播的需求,每个自己都要自己写,写的挺烦的.终于,在网上发现了swiper插件,发现还是挺实用的,但其中还是踩过了不少的坑,其中有不少都是很简单的问题,但到发现的时候都是花了不少时间, ...

  8. Notepad++中Python脚本运行出现语法错误：IndentationError: unindent does not match any outer indentation level

    使用Notepad++编辑python代码运行遇到了这个问题: IndentationError: unindent does not match any outer indentation leve ...

  9. Kubernetes1.4正式发布

    Kubernetes1.4正式发布. 昨天刚预测1.4即将正式发布,结果晚上Kubernetes1.4就正式发布了. 先看看Kubernetes发布历史: Kubernetes 1.0 - 2015年 ...

  10. 容器云平台使用体验：数人云Crane（续）

    数人云在9月6日开通了容器管理面板Crane的试用活动,这是国内首个基于DockerSwarmKit的容器管理工具.它具有Docker原生编排功能,采用轻量化架构,帮助开发者快速搭建DevOps环境, ...