Vue 循环为选中的li列表添加效果

港控/mmm° 2023-08-17 16:34 78阅读 0赞

<!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>

转载于:https://www.cnblogs.com/LindaBlog/p/11207205.html

发表评论取消回复

表情：

评论列表（有 0 条评论，78人围观）

还没有评论，来说两句吧...

相关阅读

相关为文字/图片添加按压效果

1、文字 layout布局： > <TextView > > android:layout\_width="@dimen/textview\_button\_widt

末蓝、/ 2024年04月01日 10:42/ 0 赞/ 39 阅读

相关使用jQuery为无序列表（ul）中的列表项（li）添加背景颜色

要在使用jQuery编写的网页中为无序列表中的列表项添加背景颜色，您可以按照以下步骤进行操作：步骤 1：引入jQuery库首先，在您的HTML文件中引入jQuery库

怼烎@/ 2024年03月01日 03:36/ 0 赞/ 14 阅读

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

港控/mmm°/ 2023年08月17日 16:34/ 0 赞/ 79 阅读

相关 ul li列表排序

在一个列表中，每一项都有多个数据，像这样 <ul class="datalist"> <li class="item"> <span c

以你之姓@/ 2022年10月16日 09:59/ 0 赞/ 171 阅读

相关动态添加删除li

这个功能的需求是这样的，接收人处显示多个用户名（是结果），在输入框输入完成后，回车键或者失去焦点，就去查询，查询结果出来后，通过点击加号再添到接收人处。

痛定思痛。/ 2022年08月18日 13:15/ 0 赞/ 189 阅读

相关 js循环遍历ul中li的点击事件，给给选中li添加css

功能：对于一个ul中固定的li个数，当点击其中一个li时，改变选中li的颜色；同时改变对应的另一个ul中li的颜色页面初始化的界面： ![Center][] HT

小咪咪/ 2022年06月08日 01:56/ 0 赞/ 1374 阅读

相关 js动态获取li当前选中的值

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script s

古城微笑少年丶/ 2022年05月23日 06:39/ 0 赞/ 198 阅读

相关 vue里面的v-for列表循环

列表渲染 v-for v-for可以把数据中的一个数组对应为一组元素 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据

古城微笑少年丶/ 2021年10月19日 09:58/ 0 赞/ 341 阅读

相关 vue中添加水印效果

效果图 ![在这里插入图片描述][25a7082682e13cd3488e61e03e4e56d7.png_pic_center] 创建warterMark.js文件

待我称王封你为后i/ 2021年09月09日 03:14/ 0 赞/ 557 阅读

相关 vue v-for循环列表的使用

html:  <template> <view class="content"> <view

忘是亡心i/ 2021年09月07日 06:09/ 0 赞/ 260 阅读