<!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. ajax多图片上传demo

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

  2. php实现图片以base64显示的方法达到效果

    目前Data URI scheme支持的类型有: data:text/plain,文本数据data:text/html,HTML代码data:text/html;base64,base64编码的HTM ...

  3. var与let循环中经典问题

    循环1: 下面代码运行结果是输出10   <script> var a =[]; for(var i = 0;i<10;i++){ a[i] = function(){ consol ...

  4. Minitab软件是现代质量管理统计的领先者，全球六西格玛实施的共同语言，以无可比拟的强大功能和简易的可视化操作深受广大质量学者和统计专家的青睐。

    Minitab软件是现代质量管理统计的领先者,全球六西格玛实施的共同语言,以无可比拟的强大功能和简易的可视化操作深受广大质量学者和统计专家的青睐. MINITAB 功能菜单包括:基础和高级统计工具: ...

  5. 基于matlab的傅里叶变换

    原文出处https://blog.csdn.net/qq_37366291/article/details/79832886 例子1 作用:使用傅里叶变换找出隐藏在噪声中的信号的频率成分.(指定信号的 ...

  6. 机房收费系统之【只允许一个MDI窗体 错误：426】 标签： vb 2014-08-15 10:36 1149人阅读 评论(23)

    机房收费系统的主窗体是MDI窗体,为了在这个窗体上添加控件,所以我们在窗体上添加了picture控件,在MDI窗体中,子窗体实际上位于MDIClient里,即子窗体的父窗体就是MDIClient,而放 ...

  7. Java练习 SDUT-3848_Shift Dot

    Shift Dot Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 给出平面直角坐标系中的一点,并顺序给出n个向量,求该 ...

  8. Lib1vent：10链接监听器接受TCP链接

    evconnlistener机制提供了监听并接受TCP链接的方法.除非特别注明,本章的所有函数和类型都在event2/listener.h中声明. 一:创建或释放evconnlistener stru ...

  9. Nuxt.js打造旅游网站第2篇_首页开发

    页面效果: 1.初始化默认布局 nuxtjs提供了一个公共布局组件layouts/default.vue,该布局组件默认作用于所有页面,所以我们可以在这里加上一些公共样式,在下一小结中还会导入公共组件 ...

  10. JavaScriptBreak 语句 continue 语句

    break 语句用于跳出循环. continue 用于跳过循环中的一个迭代. Break 语句 我们已经在本教程之前的章节中见到过 break 语句.它用于跳出 switch() 语句. break ...