<!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. 2-3 Numpy+Matplotlib可视化（一）

    (1)pyplot基础绘图 # -*-coding:utf-8-*- # !/usr/bin/env python # Author:@vilicute import numpy as np impo ...

  2. man命令及help命令

    一.man命令 man命令常用工具命令 man命令是Linux下的帮助指令,通过man指令可以查看Linux中的指令帮助.配置文件帮助和编程帮助等信息. 语法: man(选项)(参数) 选项: -a: ...

  3. 【7.19 graphshortestpath graphallshortestpaths函数】matlab 求最短路径函数总结

    graphshortestpath 函数是用来解决最短路径问题的. 语法为: [dist, path, pred]=graphshortestpath(G,S) [dist, path, pred]= ...

  4. Directx11教程(57) 环境映射

    原文:Directx11教程(57) 环境映射       建好skydome后,如果我们想让其中的某个物体,比如那个球体来映射出周围环境的蓝天白云(不包括自己附近的物体),该怎么做呢?此时可以把这个 ...

  5. Ceph 之Multisite 下的bucket reshard

    目录 一.背景和问题 二.bucket reshard 过程 主集群信息汇总 Multisite 下手动reshard References 一.背景和问题 默认情况下只有当单个bucket承载的ob ...

  6. 跟我一起认识axure（二）

    创建企业网站页面步骤 第一步修改这里 变成 第一部分就完成了 第二部分部件窗口 在Axure中设计页面像小时候玩的拼图游戏,那么部件窗口就是专门用来存放拼图块的容器 使用部件窗口中常用的部件设计欢迎页 ...

  7. QT语言翻译

    QT中多语言的实现方式: 1.代码中tr运用 2.使用工具生成ts文件 3.翻译ts文件 4.生成qm文件 5.程序加载 以下内容程序加载时放入即可. QString appPath = QCoreA ...

  8. 安装 FastAdmin 时忘记 MySQL 密码怎么办？

    安装 FastAdmin 时忘记 MySQL 密码怎么办? 给 MySQL 启动时加上 skip-grant-tables 参数,然后随便使用用户名都可以进入 MySQL. 接着就可以使用 命令改了 ...

  9. 如何编写go代码

    go是一种静态编译型的语言,它的编译速度非常快. go的官方编译器称为gc,包括编译工具5g,6g和8g,连接工具5l,6l和8l.其中的数字表示处理器的架构.我们不必关心如何挑选这些工具,因为go提 ...

  10. input禁止复制、粘贴、剪切

    <input type="text" autocomplete="off"> <!-- autocomplete="off" ...