55 lines
1.2 KiB
Vue
55 lines
1.2 KiB
Vue
<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> |