<script setup>
   
   import { ref } from 'vue'
   const isActive = ref(false)
   const hasError = ref(1)
   
   function endis() {
      
      isActive.value = isActive.value ? false : true;
      hasError.value = hasError.value ? false : true;
   }

</script>



<template>
   <h1>Стили и классы, Отрисовка элементов</h1>
   <div>
      
      <div  :class="{design:isActive, 'text-danger': hasError}" @click="endis">Блок с динамическим приминения класса. Нажми на надпись </div>
      <br><br>
      <span @click="endis">Показать\скрыть окно</span>

      <div  v-if="isActive" class="modwind">
         <p> Собщение!</p>
      </div>
      <div v-else>Окно скрыто</div>

   </div>
</template>


<style>
   .design{
      font-size: 16px;
      color: #654321;
      padding:5px;
      border: solid 1px #123456;
   }

   .modwind{
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 300px;
      height: 200px;
      border:solid 1px  #123456;
      padding: 10px;
      margin: auto;
      background-color: azure;
   }
</style>