자주 쓰는 Vue 문법 / 유용한 기능 Vue 사용법

Vue 화면 조작

ul li 목록 출력 방법

<template>
  <ul class="classSelectUl">
    <li
      v-for="(item, index) in list"
      :key="index"
      :class="{ active: activeIndex === index}"
      @click="setActiveIndex(index)"
    ></li>
  </ul>
</template>
<script>
import { ref, onMounted } from "vue";
import { useapi명 } from "@/common/utils/api명.js";

const { getList } = useapi명();

const list = ref([]);
const activeIndex = ref(null);

// Vue 마운트 시
onMounted(async () => {
  // 컴포저블 함수로 리스트 조회
  list.value = await getList();
});

function setActiveIndex(index) {
  activeIndex.value = index;
}
</script>

ul 목록 li 선택 시 active 클래스 추가되는 함수도 작성하였습니다.