v-for 搭配 Object
栏目: JavaScript · 发布时间: 5年前
内容简介：當使用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 上找到
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Unity游戏设计与实现
[日]加藤政树 / 罗水东 / 人民邮电出版社 / 2015-2 / 79.00元
本书出自日本知名游戏公司万代南梦宫的资深开发人员之手，面向初级游戏开发人员，通过10个不同类型的游戏实例，展示了真正的游戏设计和实现过程。本书的重点并不在于讲解Unity的各种功能细节，而在于核心玩法的设计和实现思路。每个实例都从一个idea 开始，不断丰富，自然而然地推出各种概念，引导读者思考必要的数据结构和编程方法。掌握了这些思路，即便换成另外一种引擎，也可以轻松地开发出同类型的游戏。 ......一起来看看 《Unity游戏设计与实现》 这本书的介绍吧!
