vue 怎么把数组里面多条数据里面的变量有逗号拆分然后渲染到一个标签上
时间: 2024-03-08 08:48:06 浏览: 226
你可以使用 `v-for` 指令来循环遍历数组,然后使用 JavaScript 的 `split()` 方法将每个元素中的逗号拆分成数组,最后在循环内部使用 `v-bind` 或者简写的 `:` 将拆分后的数组渲染到标签上。
具体实现如下:
```html
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">
<span>{{ item.name }}</span>
<span v-for="data in item.data.split(',')" :key="data">{{ data }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
id: 1,
name: 'item 1',
data: '1,2,3'
},
{
id: 2,
name: 'item 2',
data: '4,5,6'
}
]
};
}
};
</script>
```
在上面的示例中,我们首先使用 `v-for` 循环遍历 `items` 数组,然后使用 `v-bind` 将每个数组元素的 `name` 属性渲染到一个 `span` 标签上。接下来,在每个数组元素的 `data` 属性上调用 `split()` 方法,将逗号分隔的字符串拆分成数组,然后再次使用 `v-for` 将拆分后的数组渲染到多个 `span` 标签上。注意,我们使用 `:key` 属性来标识每个拆分后的数组元素,以便 Vue 可以正确地跟踪每个元素的变化。
阅读全文