vue.js 간단한 질문입니다 (v-for 관련)

안녕하세요. 여러 방법이 있겠지만, 반드시 span tag에 v-for가 붙어야하는 상황이 아니고 쉼표가 반드시 span tag 바깥에 있어야 하는 상황이라면 외부를 한 번 감싸서 for를 돌리시는건 어떨까요? <ul> <li v-for="(element, index) in list" :key="index" > <span>{{ element }}</span>{{ index === list.length - 1 ? '' : ',' }} </li> </ul> 와 같은 형식으로요.

원하는 결과물을 얻으려면 'v-for'를 사용할 때 조건부 렌더링을 활용하면 됩니다. 아래 예제를 참고하세요. 아래 코드에서 ' v-if '를 사용해 ' , '를 추가하는 조건을 설정했습니다. ' index !== list.length - 1 ' 조건은 배열의 마지막 요소가 아닌 경우에만 ' , '를 출력하게 합니다. 이렇게 하면 원하는 결과물을 얻을 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div>
    <span v-for="(element, index) in list" :key="index">
      {{ element }}<span v-if="index !== list.length - 1">,</span>
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['hi', 'hello', 'test'],
    };
  },
};
</script>


<span>hi</span>,<span>hello</span>,<span>test</span>