Директива v-show

Последнее обновление: 01.08.2017

Директива v-show аналогично v-if позволяет скрывать или отображать элементы по определенному условию:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
	<div v-show="visible">
		<h2>Заголовок</h2>
		<p>Текст</p>
	</div>
	<button v-on:click="visible=!visible">{{visible?'Скрыть':'Отобразить'}}</button>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
			visible: true
		}
    });
</script>
</body>
</html>

Здесь в зависимости от значения условия, которое представляет свойство visible, будет скрываться или отображаться блок div. А с помощью кнопки мы можем переключить значение этого свойства с true на false и наоборот.

Директива v-show в Vue.js

Но в отличие от v-if директива v-show не изменяет структуру DOM, а манипулирует значением стилевого свойства display. То есть если условие в v-show возвращает false, то для элемента устанавливается стиль display:none;, и тем самым данный элемент скрывается на веб-странице.

В то же время манипуляции с DOM через v-if увеличивают накладные расходы и снижают производительность. Поэтому в тех ситуациях, когда возможно частое переключение видимости элемента, следует предпочитать v-show.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850