В прошлом выпуске мы говорили о том, как использовать v-if, v-else и v-else-if. Позвольте мне упомянуть об этом еще раз. Когда мы используем оператор v-if в коде, v-if и v- else или v. Не выполняйте другой код в середине else-if, например:
<div v-if="day==1">Сегодня 1-я неделя</div>
<div v-else-if="day==2">Сегодня 2-я неделя</div>
<div v-else- if="day==3">Сегодня 3-е число недели</div>
<div v-else-if="day==4">Сегодня 4-е число недели</div>
<div><p>При выполнении другого кода здесь произойдет ошибка</p></div>
<div v-else-if="day==5">Сегодня пятница</div>
<div v-else -if="day==6">Сегодня 6-е число</div>
<div v-else-if="day==7">Сегодня 7-е число</div>
<div v-else>Ошибка формата< /дел>
Это означает, что наш синтаксис типов v-if должен быть близок друг к другу, и ничего больше вставлять в середину нельзя.
=============================================== =====================
В этом выпуске мы собираемся изучить синтаксис v-for, который аналогичен синтаксису других языков. Оператор цикла for в основном используется таким же образом.
Как обычно, переходим непосредственно к коду:
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id= "app">
<h1>{
{title}}</h1>
<h2>{
{num}}</h2>
<h3>{
{bool}}</h3>
<h4>{
{arr[2]} </h4>
<h5>{
{obj.name}}</h5>
<hr />
<ul>
<li v-for="(i,j) in arr">{
{j+":"+i}}</li>
</ul>
<hr />
<ul>
<li v-for="(a,b) of obj">{
{b}}:{
{a}}</li>
</ul>
<hr />
<template v-for="item in arr" >
<em>{
{item}}</em>
</template>
</div>
</body>
</html>
<script>
new Vue({ el: "#app", data:{ title: "Практика обучения в Эркенге", num: 123, bool:false, arr:[111,222,333,444], obj:{name:"Erkeng", age :"22",sex:"мужской"}, } }) </script>
Мы выводим только одни данные в тегах h1 ~ h5 выше. Когда мы хотим вывести два или более данных в массив, нам нужно использовать оператор v-for для зацикливания этого кода.
例如:<li v-for="(i,j) in arr">{ {j+":"+i}}</li>
Для этого оператора мы называем массив arr i (в arr) и определяем массив j. Поскольку при выполнении компьютера первое число равно 0, начальное значение j равно 0, а j+ — это цикл плюс 1: ": « Это вставка одного между двумя данными: например, если вы хотите вставить другие данные, просто «вставьте сюда другие данные», +i означает выполнение цикла с 0-й позиции в массиве. То есть первый — 111, пока он не будет выполнен до тех пор, пока не будет данных или пока не будет задан диапазон.
<li v-for="(a,b) of obj">{ {b}}:{ {a}}</li>
of и in одинаковы, и эти два использования аналогичны. Ссылка на массив obj (obj) и назовите его a и b. Затем, когда мы выведем его в поле, мы должны сделать это в обратном порядке. После его запуска вы поймете почему, когда увидите эффект. { {b}}:{ {a}} вместо { {a}}:{ {b}} .
К этому моменту вы уже так много узнали о синтаксисе v-for. Если вы хотите расширить свои знания, вы можете написать программу и опробовать ее на основе этой идеи.