<!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. Windows系统MySQL8.0的安装教程

    MySQL推出的8.0版本亮点多多,尤其是两倍的提速更让我们迫不及待地安装一睹为快.然而目前我们所用的版本还在5.7之前,今天小编给家分享一下MySQL8.0的安装,尤其是多版本MySQL的共存. 方 ...

  2. 我从HTML的meta中学到了什么

    meta meta中有这样几个常用属性:http-equiv,name,content,包括html5新增的charset. 注意:content属性用来存储meta信息的内容,所有的主流浏览器都支持 ...

  3. iOS - CAReplicatorLayer 的运用

    http://www.cocoachina.com/ios/20151230/14822.html 序 CAReplicatorLayer可以复制自己子层的layer,并且复制的出来的layer和原来 ...

  4. 【机器学习PAI实战】—— 玩转人工智能之商品价格预测

    摘要: 我们经常思考机器学习,深度学习,以至于人工智能给我们带来什么?在数据相对充足,足够真实的情况下,好的学习模型可以发现事件本身的内在规则,内在联系.我们去除冗余的信息,可以通过最少的特征构建最简 ...

  5. Codeforces 442A

    题目链接 A. Borya and Hanabi time limit per test 2 seconds memory limit per test 256 megabytes input sta ...

  6. python 代码中的类和对象

  7. Handler, AsyncTask用法简单示例

    package com.jim.testapp; import android.app.Activity; import android.os.AsyncTask; import android.os ...

  8. 【JZOJ4886】【NOIP2016提高A组集训第13场11.11】字符串

    题目描述 某日mhy12345在教同学们写helloworld,要求同学们用程序输出一个给定长度的字符串,然而发现有些人输出了一些"危险"的东西,所以mhy12345想知道对于任意 ...

  9. ELK之开心小爬爬

    1.开心小爬爬 在爬取之前需要先安装requests模块和BeautifulSoup这两个模块 ''' https://www.autohome.com.cn/all/ 爬取图片和链接 写入数据库里边 ...

  10. 使用spring jpa 时,利用nativeQuery,获取数据,无需新建实体,按照别名返回Json数据

    刚开始是这样写的 @Query(value = "SELECT ll.user_id id ,u.catong_img catong_img,ll.locationId location_i ...