v-for 搭配 Object

栏目: JavaScript · 发布时间: 7年前

内容简介:當使用Vue 2.5.17Vue CLI 3.2.1

當使用 v-for 顯示重複資料時,直覺都會想到 array,事實上 ECMAScript 的 object 也是一種 Container,而 v-for 也支援 object,在有些情境使用 object 會比 array 方便。

Version

Vue 2.5.17

Vue CLI 3.2.1

Array

<template>
  <div>
    <ul>
      <li v-for="item in data" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
const data = function() {
  return {
    data: [
      { id: 1, name: 'Sam' },
      { id: 2, name: 'Kevin' },
    ],
  };
};

export default {
  name: 'HelloWorld',
  data,
};
</script>

第 4 行

<li v-for="item in data" :key="item.id">
  {{ item.name }}
</li>

使用 v-for 搭配 array 顯示重複資料。

12 行

const data = function() {
  return {
    data: [
      { id: 1, name: 'Sam' },
      { id: 2, name: 'Kevin' },
    ],
  };
};

當使用 array 時,會將 object 放在 array 內,事實上可以直接使用 object。

Object

<template>
  <div>
    <ul>
      <li v-for="(value, key) in data" :key="key">
        {{ value }}
      </li>
    </ul>
  </div>
</template>

<script>
const data = function() {
  return {
    data: {
      1: 'Sam',
      2: 'Kevin',
    },
  };
};

export default {
  name: 'HelloWorld',
  data,
};
</script>

12 行

const data = function() {
  return {
    data: {
      1: 'Sam',
      2: 'Kevin',
    },
  };
};

由於 object 也是 container,因此將 data 從 array 改成 object。

第 4 行

<li v-for="(value, key) in data" :key="key">
  {{ value }}
</li>

v-for 也支援 object。

  • 第一個參數為 object 的 property value
  • 第二個參數為 object 的 property key

如此就能順利的取得 object 的 key / value 了。

Conclusion

  • 使用 v-for 別只想到 array,事實上有些需求直接使用 object 可能更方便

Sample Code

完整的範例可以在我的 GitHub 上找到


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

从零开始学微信公众号运营推广

从零开始学微信公众号运营推广

叶龙 / 清华大学出版社 / 2017-6-1 / 39.80

本书是丛书的第2本,具体内容如下。 第1章 运营者入门——选择、注册和认证 第2章 变现和赚钱——如何从0到100万 第3章 决定打开率——标题的取名和优化 第4章 决定美观度——图片的选取和优化 第5章 决定停留率——正文的编辑和优化 第6章 决定欣赏率——版式的编辑和优化 第7章 数据的分析——用户内容的精准营销 书中从微信运营入门开始,以商业变......一起来看看 《从零开始学微信公众号运营推广》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具