Показать сообщение отдельно
  #2 (permalink)  
Старый 17.07.2022, 13:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

vue parent class toggle
Сообщение от yozuul
3. Есть такой код
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .item {
            border: 1px solid #008000;
            margin: 4px;
        }

        .active {
            border: 1px solid red;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <div v-for="item in items" :key="item.id" :class="[{ active: item.isActive },'item']">
            <button @click="item.isActive = !item.isActive">Клик</button>
        </div>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                
                items: [{
                    id: 1,
                    isActive: false
                }, {
                    id: 2,
                    isActive: false
                }, {
                    id: 3,
                    isActive: false
                }]
            }
        });
    </script>
</body>

</html>

Последний раз редактировалось рони, 17.07.2022 в 13:17.
Ответить с цитированием