<!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. passive的作用和原理

    passived到底有什么用? passived主要用于优化浏览器页面滚动的性能,让页面滚动更顺滑~~ passived产生的历史时间线 addEventListener():大家都是认识的,为dom ...

  2. 什么？ 1XIN = 21BTC

    什么? 1XIN = 21BTC 最初看到这个标题,我还回去考证一下. 原来是 Mixin Network 的宣传广告. BTC 是多少? 2100万枚. XIN 是 100 万枚. 所以才有了 1X ...

  3. POJ1655 Balancing Art

    Balancing Act Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13865   Accepted: 5880 De ...

  4. 新一代互联网传输协议QUIC浅析

    QUIC(Quick UDP Internet Connection)是谷歌制定的一种互联网传输层协议,它基于UDP传输层协议,同时兼具TCP.TLS.HTTP/2等协议的可靠性与安全性,可以有效减少 ...

  5. Mathcad 是一种工程计算软件,主要运算功能:代数运算、线性代数、微积分、符号计算、2D和3D图表、动画、函数、程序编写、逻辑运算、变量与单位的定义和计算等。

    Mathcad软件包Mathcad是由MathSoft公司(2006 年4 月被美国PTC收购)推出的一种交互式数值计算系统. Mathcad 是一种工程计算软件,作为工程计算的全球标准,与专有的计算 ...

  6. 【JZOJ4799】【NOIP2016提高A组模拟9.24】我的快乐时代

    题目描述 输入 一行,两个整数l,r . 输出 一行,一个整数,表示第l 天到第r 天的愉悦值的和. 样例输入 64 89 样例输出 1818 数据范围 解法 可以参考数位动态规划的想法. 从个位开始 ...

  7. spring boot + mybatis 访问 neo4j

    之前有通过rest的风格去访问,但是每次需要访问时候将statement一并加入header中去数据库执行,方式简单.且思路清晰,但是不便于形成模板调用,固采用mybaits来集成. 1.关键pom. ...

  8. python 字符串匹配算法设计

  9. python 模块的执行环境

  10. 【水滴石穿】react-native-template-app

    这个也是一个基础项目 地址如下https://github.com/ndlonghi/react-native-template-app 点击登陆跳转到首页 分析代码如 react-native-te ...