Многие люди не знают, что v-for можно так деструктурировать!

JavaScript Vue.js

Автор: Майкл Тиссен Переводчик: Front-end Xiaozhi Источник: среда

Ставьте лайк и смотрите снова, формируйте привычку

эта статьяGitHub GitHub.com/QQ449245884…Он был включен в вышеизложенное, и более ранние статьи с высокими похвалами были классифицированы, а также было систематизировано множество моих документов и учебных материалов. Добро пожаловать в Star and Perfect. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Надеюсь, у нас что-то получится вместе.

Недавно узнал, что мы можем использоватьv-forдеконструировать.

Это работает, потому что Vue будетv-forВся первая часть поднимается непосредственно в часть аргументов функции:

<li v-for="____ in array">
</li>

function (____) {
  //...
}

Затем Vue использует эту функцию для внутреннего рендеринга списка.

Это говорит о том, что любой допустимый Javascript, который может быть помещен в круглые скобки в функции, также может быть помещен в v-for, например:

<li v-for="{
  // Set a default
  radius = 20,

  // Destructure nested objects
  point: { x, y },
} in circles">

Здесь можно делать плохие вещи, только не сходи с ума 😉.

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

Другие трюки с v-for

Как известно, можно преобразовать изv-forПолучить индекс в:

<li v-for="(movie, index) in [
  'Lion King',
  'Frozen',
  'The Princess Bride'
]">
  {{ index + 1 }} - {{ movie }}
</li>

При использовании объекта вы также можете захватитьkey:

<li v-for="(value, key) in {
  name: 'Lion King',
  released: 2019,
  director: 'Jon Favreau',
}">
  {{ key }}: {{ value }}
</li>

Вы также можете комбинировать эти два метода, чтобы получить ключ и индекс свойства:

<li v-for="(value, key, index) in {
  name: 'Lion King',
  released: 2019,
  director: 'Jon Favreau',
}">
  #{{ index + 1 }}. {{ key }}: {{ value }}
</li>

Vue поддерживаетMapа такжеSetобъекты повторяются, но так как они находятся вVue 2.xне отвечает, поэтому его полезность очень ограничена. Мы также можем использовать здесь любой Iterable, включая генераторы.

Кстати, я иногда используюMapилиSet, но обычно вычисляется только как промежуточный объект. Например, если мне нужно найти все уникальные строки в списке, я могу сделать это:

computed() {
  uniqueItems() {
    // 从数组创建一个Set，删除所有重复项
    const unique = new Set(this.items);

    // 将该 Set 转换回可用于 Vue 的数组
    return Array.from(unique);
  }
}

строка иv-for

Знаете ли вы, что вы также можете использоватьv-forперебирать строку?

Этого нет в документации, я просто читаю код, чтобы понять это.v-forЭто было обнаружено только тогда, когда оно было реализовано:

<p v-for="character in 'Hello, World'">
  {{ character }}
</p>

Приведенное выше будет печатать каждый символ.

Ошибки, которые могут существовать после развертывания кода, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку логов.Кстати, всем рекомендую полезный инструмент мониторинга ошибок.Fundebug.

оригинал:forum.v UE JS.org/his/struct U…

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

Категории