Vue-点击 li 动态添加class --＞[练]

Vue @Draven

效果预览
html代码
css代码
js代码

效果预览

请添加图片描述

html代码

<body>
    <div id="box">
        <ul>
            <li v-for="(temp,index) in dataList" @click="addClass(index)" :class="current===index? 'bgColor':''">
                {{temp}}
            li>
        ul>
    div>
body>
1
2
3
4
5
6
7
8
9

css代码

js代码

    <script src="lib/vue.js"></script>
        <script>
        new Vue({
            el: "#box",
            data:{
                current:0,
                dataList:["杨铁丝","杨铁胆","杨铁锤"],
            },
            methods:{
                addClass(index){
                    this.current=index;
                },
            },
        })
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

相关阅读:
MYSQL-索引
Hive中的map类型及其操作
小程序微信支付实践案例-JAVA
【算法系列 | 9】深入解析查找算法之—哈希表查找
web前端期末大作业——贵州山地旅游介绍网页1页 HTML旅游网站设计与实现
【Java 基础篇】Java线程同步：Lock接口详解
Spring Boot-2.3.7.RELEASE整合activiti-6.0示例步骤
HC32L110 在 Ubuntu 下使用 J-Link 烧录
技术转型项目PM，如何做好项目管理？
移远EC600U-CN开发板 11.17

原文地址：https://blog.csdn.net/Messchao/article/details/125900026