[JavaScript知识库] vue v-for遍历数组点击改变背景色简单操作新手笔记

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue v-for遍历数组点击改变背景色简单操作新手笔记 -> 正文阅读

[JavaScript知识库]vue v-for遍历数组点击改变背景色简单操作新手笔记

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li  :class="color(index)" @click="changeColor(index)" v-for="(msg, index) in message">{{index}}---{{msg}}</li>
    </ul>
</div>

<script src="../vue/vue.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            message: ["111111","22222222","3333333","4444444"],
            count: 0
        },
        methods: {
            changeColor: function(index){
                this.count = index;
            },
            color: function(index){
                if(this.count === index){
                    return 'active';
                }
            }
        }
    })
</script>
</body>
<style>
    .active {
        background: red;
    }
</style>
</html>