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 上找到
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
