ref 데이터의 연동 3

 

ref 데이터의 연동

 

• v-model 디렉티브를 사용하여 이 드롭다운 목록과 JavaScript 변수 selectedOption을 양방향 데이터 바인딩한다. 사용자가 목록에서 옵션을 선택하면 selectedOption의 값이 해당 옵션의 텍스트 값으로 업데이트된다.
• :style 디렉티브를 사용하여 이 <span> 요소의 텍스트 색상을 선택된 옵션 값(selectedOption)에 따라 동적으로 변경한다.
• <script setup> 블록은 Vue.js 3의 Composition API를 사용하여 데이터와 로직을 정의하는 곳이다.
• import { ref } from 'vue'; : Vue 3의 ref 함수를 가져와서 사용한다. ref 함수를 사용하면 반응성 있는 데이터를 생성할 수 있다.
• const selectedOption = ref(null);: selectedOption 변수를 정의하고 ref 함수를 사용하여 반응성 있는 데이터를 생성한다. 초기값은 null로 설정된다.

 

// HTML
<template>
	
  <div>
    <select v-model="selectedOption">
        <option>red</option>
        <option>blue</option>
        <option>green</option>
    </select>
    <span :style="{ color: selectedOption }">{{ selectedOption }}</span>
  </div>
  
</template>

// Javascript
<script setup>
	import { ref } from 'vue';
  const selectedOption = ref(null);
</script>

---