Vue 3 실전: 아코디언 UI

<div id='acc' style='font-family:monospace;padding:16px;background:#0d1117;color:#e8e8e8'>
<div id='acc-out'></div>
</div>
<script src='https://unpkg.com/vue@3/dist/vue.global.js'></script>
<script>
const{createApp,ref}=Vue;
createApp({
  setup(){
    const items=[
      {id:1,q:'HTML이란 무엇인가?',a:'HyperText Markup Language. 웹 페이지의 구조를 정의하는 마크업 언어입니다.'},
      {id:2,q:'CSS란 무엇인가?',a:'Cascading Style Sheets. 웹 페이지의 시각적 스타일을 정의합니다.'},
      {id:3,q:'JavaScript란 무엇인가?',a:'웹 페이지에 인터랙티브한 동작을 추가하는 프로그래밍 언어입니다.'},
      {id:4,q:'Vue 3란 무엇인가?',a:'Composition API를 중심으로 한 프로그레시브 JavaScript 프레임워크입니다.'},
    ];
    const open=ref(null);
    const toggle=(id)=>open.value=open.value===id?null:id;
    return{items,open,toggle};
  },
  template:`<div>
    <div v-for='item in items' :key='item.id' style='border-bottom:1px solid #1a1a1a;'>
      <button @click='toggle(item.id)' style='width:100%;text-align:left;background:none;border:none;padding:10px 0;cursor:pointer;font-family:monospace;font-size:11px;display:flex;justify-content:space-between;color:#888;'>
        <span :style='{color:open===item.id?"#10b981":"#888"}'>{{item.q}}</span>
        <span style='color:#10b981;'>{{open===item.id?"▲":"▼"}}</span>
      </button>
      <div v-if='open===item.id' style='padding:0 0 10px 0;font-size:11px;color:#555;line-height:1.7;'>{{item.a}}</div>
    </div>
  </div>`
}).mount('#acc-out');
</script>