在Vue.js中获取数组列可以使用计算属性或者方法来实现。
data() {
return {
array: [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
]
}
},
computed: {
column() {
return this.array.map(item => item.name);
}
}
在上述代码中,array
是包含对象的数组,每个对象有id
和name
属性。通过计算属性column
,我们可以获取array
数组中的name
列。
data() {
return {
array: [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
]
}
},
methods: {
getColumn() {
return this.array.map(item => item.name);
}
}
在上述代码中,array
是包含对象的数组,每个对象有id
和name
属性。通过方法getColumn()
,我们可以获取array
数组中的name
列。
无论是计算属性还是方法,你可以在Vue模板中直接使用获取到的数组列。
<template>
<div>
<ul>
<li v-for="name in column" :key="name">{{ name }}</li>
</ul>
</div>
</template>
上述代码中,我们使用v-for
指令遍历column
数组,将每个元素渲染为一个li
元素。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云