Сделал сортровку. Начал фильтрацию

src/sample_examples/StylesAndClass.vue

@@ -0,0 +1,55 @@
+<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>