hyungju-lee

16. binding classes

내용

  • 속성 바인딩에 대한 논의: 이 강의에서는 특히 class 속성과 관련하여 속성 바인딩에 대해 더 자세히 알아봅니다.
  • 새로운 코드베이스: 이전 코드베이스에서 벗어나 새로운 예제에 집중하기 위해 제공된 스타터 파일을 다운로드하고 사용합니다.
  • 동적 클래스 바인딩: class에 대한 Vue의 동적 바인딩을 통해 앱의 데이터에 기반한 조건부 스타일 적용 방법을 배웁니다.
  • 예제 설명: 체크박스가 체크되면 원의 배경색을 변경하는 기능을 구현하는 예제를 설명합니다.
  • 데이터와 계산된 속성 사용: isPurple 데이터 속성과 circleClasses 계산된 속성을 사용하여 클래스를 동적으로 관리합니다.
  • 클래스 배열 사용: 클래스를 객체 대신 배열로 관리하여, 조건에 따라 클래스를 추가하거나 제거하는 방법을 설명합니다.
  • 성능 향상: 계산된 속성을 사용하여 성능을 향상시키고 코드 가독성을 높입니다.
  • 다양한 클래스 관리 방법: 클래스를 배열이나 객체 형식으로 관리하거나, 단일 값으로 바인딩하는 다양한 방법을 배웁니다.
index.html
<!DOCTYPE>
<html>

<head>
    <title>VueJS Course</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>
<div id="app">
    <label>
        <input type="checkbox" v-model="isPurple" /> Purple
    </label>

    <div class="circle" :class="{ purple: isPurple }">
        Hi!
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.6/vue.global.prod.min.js"></script>
<script src="app.js"></script>
</body>

</html>











 


 









index.html
<!DOCTYPE>
<html>

<head>
    <title>VueJS Course</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>
<div id="app">
    <label>
        <input type="checkbox" v-model="isPurple" /> Purple
    </label>

    <div class="circle" :class="circle_classes">
        Hi!
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.6/vue.global.prod.min.js"></script>
<script src="app.js"></script>
</body>

</html>











 


 









index.html
<!DOCTYPE>
<html>

<head>
    <title>VueJS Course</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>
<div id="app">
    <label>
        <input type="checkbox" v-model="isPurple" /> Purple
    </label>

    <select v-model="selectedColor">
        <option value="">White</option>
        <option value="text-black">Black</option>
        <option value="text-orange">Orange</option>
    </select>

    <div class="circle" :class="[selectedColor, circle_classes]">
        Hi!
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.6/vue.global.prod.min.js"></script>
<script src="app.js"></script>
</body>

</html>