vue v-for遍历数组 点击改变背景色简单操作 新手笔记

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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>

你可能感兴趣的:(vue)