Главная » Статьи » Vue JS — Отображение списков и результата выполненных условий

Vue JS — Отображение списков и результата выполненных условий

Vue JS — Отображение списков и результата выполненных условий

От автора: в этом разделе мы поговорим об условном отображении, а также о том, как выводятся Vue JS списки. Что касается условного отображения, то мы рассмотрим использование if, if-else, if-else-if, show и так далее. По теме отображения списков мы рассмотрим использование for loop.

Условное отображение

Давайте начнём с примера, который иллюстрирует условное отображение. При условном отображении нам нужно получить результат только тогда, когда выполняется условие, а проверка условия выполняется с помощью if, if-else, if-else-if, show, и т.д.

v-if

<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button> <span style = "font-size:25px;"><b>{{show}}</b></span> <h1 v-if = "show">This is h1 tag</h1> <h2>This is h2 tag</h2> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { show: true, styleobj: { backgroundColor: '#2196F3!important', cursor: 'pointer', padding: '8px 16px', verticalAlign: 'middle', } }, methods : { showdata : function() { this.show = !this.show; } }, }); </script> </body>
</html>

Результат

В вышеприведённом примере мы создали кнопку и два тэга h1 с сообщением.

Переменная с именем show объявляется и инициализируется со значением true. Оно отображается рядом с кнопкой. Нажатием кнопки мы вызываем метод showdata, который переключает значение переменной show. Это значит, что при нажатии на кнопку значение переменной show будет изменяться с true на false, а с false на true.

Мы присвоили if тэгу h1, как показано в следующем фрагменте кода.

<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<h1 v-if = "show">This is h1 tag</h1>

Данный код проверяет значение переменной show и если оно равно true, то будет отображаться тэг h1. Нажмите кнопку и увидите в браузере, что если значение переменной show меняется на false, то тэг h1 не отображается в браузере. Он отображается только когда переменная show имеет значение true.

В браузере будет отображаться следующее.

Если мы посмотрим код элемента в браузере, то вот что увидим, когда show имеет значение false.

Тэг h1 будет удалён из DOM, если переменная show задана как false.

Вот, что мы видим, если переменная истинна. Тэг h1 будет добавлен обратно к DOM, если переменная show имеет значение true.

v-else

На следующем примере мы добавили v-else ко второму тэгу h1.

<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button> <span style = "font-size:25px;"><b>{{show}}</b></span> <h1 v-if = "show">This is h1 tag</h1> <h2 v-else>This is h2 tag</h2> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { show: true, styleobj: { backgroundColor: '#2196F3!important', cursor: 'pointer', padding: '8px 16px', verticalAlign: 'middle', } }, methods : { showdata : function() { this.show = !this.show; } }, }); </script> </body>
</html>

v-else добавляется путём выполнения следующего кода.

<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>

Теперь, если show имеет значение true, то будет отображаться “This is h1 tag”, а если false, то “This is h2 tag”. Вот, что мы увидим в браузере.

Выше мы видим, что будет, если переменная show имеет значение true. Учитывая, что мы добавили v-else, второй оператор отсутствует. При нажатии на кнопку переменная show будет принимать значение false, а второй оператор будет отображаться так, как на следующем скриншоте.

v-show

v-show ведёт себя так же, как и v-if. Он также отображает и скрывает элементы, основываясь условиях. Разница между v-if и v-show заключается в том, что v-if удаляет HTML элемент из DOM, если условие является ложным, и добавляет, если условие истинно. В свою очередь, v-show скрывает элемент, если условие ложно с помощью display:none. И снова отображает элемент, если условие истинно. Таким образом, элемент всегда присутствует в dom.

<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button> <span style = "font-size:25px;"><b>{{show}}</b></span> <h1 v-if = "show">This is h1 tag</h1> <h2 v-else>This is h2 tag</h2> <div v-show = "show"> <b>V-Show:</b> <img src = "images/img.jpg" width = "100" height = "100" /> </div> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { show: true, styleobj: { backgroundColor: '#2196F3!important', cursor: 'pointer', padding: '8px 16px', verticalAlign: 'middle', } }, methods : { showdata : function() { this.show = !this.show; } }, }); </script> </body>
</html>

v-show присваивается HTML элементу с помощью следующего кода.

<div v-show = "show"><b>V-Show:</b><img src = "images/img.jpg" width = "100" height = "100" /></div>

Мы использовали ту же самую переменную show, в зависимости от её значения, в браузере отображается соответствующее изображение.

Поскольку сейчас переменная show является истинной, то отображается такое изображение, как на скриншоте выше. Давайте нажмём на кнопку и посмотрим на результат.

Переменная show является ложной, поэтому изображение скрыто. Если мы просмотрим код элемента, то увидим, что div вместе с изображением являются частью DOM с заданным стилем display: none, как продемонстрировано на вышеприведённом скриншоте.

Отображение списков

v-for

Давайте рассмотрим отображение списков с помощью директивы v-for.

<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <input type = "text" v-on:keyup.enter = "showinputvalue" v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/> <h1 v-if = "items.length>0">Display Fruits Name</h1> <ul> <li v-for = "a in items">{{a}}</li> </ul> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { items:[], styleobj: { width: "30%", padding: "12px 20px", margin: "8px 0", boxSizing: "border-box" } }, methods : { showinputvalue : function(event) { this.items.push(event.target.value); } }, }); </script> </body>
</html>

Переменная с именем items объявлена в качестве массива. У нас есть один метод с именем названием showinputvalue, присвоенный полю ввода, который получает названия фруктов. В методе названия фруктов, введённые в текстовом поле добавляются к массиву благодаря следующему коду.

showinputvalue : function(event) { this.items.push(event.target.value);
}

Мы использовали v-for для отображения введённых названий фруктов, как на следующем коде. V-for помогает выполнить перебор значений, присутствующих в массиве.

<ul> <li v-for = "a in items">{{a}}</li>
</ul>

Чтобы выполнить перебор массива с помощью for loop, нам нужно использовать v-for = ”a in items”, где a хранит значения в массиве и будет отображаться, пока не обработаются все элементы. Мы получим следующий результат в браузере.

После проверки кода элемента, вот что мы увидим в браузере. В DOM мы не видим директивы v-for для элемента li. Он отображается в DOM без директив VueJS.

Если мы хотим отобразить индекс массива, то нам понадобится следующий код.

<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <input type = "text" v-on:keyup.enter = "showinputvalue" v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/> <h1 v-if = "items.length>0">Display Fruits Name</h1> <ul> <li v-for = "(a, index) in items">{{index}}--{{a}}</li> </ul> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { items:[], styleobj: { width: "30%", padding: "12px 20px", margin: "8px 0", boxSizing: "border-box" } }, methods : { showinputvalue : function(event) { this.items.push(event.target.value); } }, }); </script> </body>
</html>

Чтобы получить индекс, мы добавили в скобки ещё одну переменную, как показано в следующем коде.

<li v-for = "(a, index) in items">{{index}}--{{a}}</li>

В (a, index), a — это значение, а index — это ключ. На следующем скриншоте показано то, что будет отображаться в браузере. Таким образом, с помощью индекса могут отображаться любые значения.

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.