Условный рендеринг и работа с массивами

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

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

Ряд директив позволяет по условию изменять структуру DOM, и одной из таких является директива v-if. Она позволяет отобразить или скрыть элемент html по условию. Например:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <p v-if="visible">Первый параграф</p>
    <p>Второй параграф</p>
	<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>

Директива v-if в качестве параметра принимает условие, которое возвращает значение true или false. Если true, то элемент, к которому применяется директива v-if, отображается. Если false, то, наоборот, скрывается. В данном примере это значение определено в свойстве visible.

С помощью кнопки в примере выше мы можем изменить значение свойства visible и соответственно отобразить или скрыть элемент.

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

В паре с директивой v-if может использоваться директива v-else, которая позволяет отобразить другой элемент, если условие в директиве v-if равно false:

<div id="app">
    <p v-if="visible">Первый параграф</p>
    <p v-else>Второй параграф</p>
	<button v-on:click="visible=!visible">{{visible?'К параграфу 2':'К параграфу 1'}}</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>

В данном случае, если условие, которое представляет свойство visible, равно true, то отображается первый параграф. Если условие возвращает false, то отображается второй параграф.

template

Так как выражение v-if является директивой, то оно может применяться только к одному элементу. Но что если мы хотим применить ее к группе элементов? В этом случае мы можем применить v-if для элемента <template>, который выступает в качестве обертки для группы элементов:

<div id="app">
	
	<template v-if="visible">
		<h1>Заголовок 1</h1>
		<p>Параграф 1</p>
	</template>
	<template v-else>
		<h1>Заголовок 2</h1>
		<p>Параграф 2</p>
	</template>
	<button v-on:click="visible=!visible">{{visible?'К параграфу 2':'К параграфу 1'}}</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>
template и v-if в Vue.js

v-else-if

С помощью директивы v-else-if к v-if можно добавить обработку дополнительных условий. Например, в зависимости от введенного числа необходимо отображать тот или иной элемент:

<div id="app">
	<input type="number" v-model="number" />
	<p v-if="number==1">Один</p>
	<p v-else-if="number==2">Два</p>
	<p v-else-if="number>2 && number<7">Несколько</p>
	<p v-else>Много</p>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
			number: 1
		}
    });
</script>
v-else-if в Vue.js

Аналогично можно использовать v-else-if вместе с template:

<template v-if="number==1">
	<p>Один</p>
</template>
<template v-else-if="number==2">
	<p>Два</p>
</template>
<template v-else-if="number>2 && number<7">
	<p>Несколько</p>
</template>
<template v-else>
	<p>Много</p>
</template>

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

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