hyungju-lee

17. binding styles

내용

  • 스타일 속성 바인딩에 대한 강의: 이 강의에서는 Vue에서 HTML 요소의 style 속성을 동적으로 바인딩하는 방법을 배웁니다.
  • 직접 스타일 적용의 예시: 원의 크기를 변경하는 예를 들어, width, height, line-height 속성을 변경하는 방법을 설명합니다.
  • 데이터 객체에 크기 속성 추가: size라는 데이터 속성을 생성하고 초기값을 150px로 설정합니다.
  • 템플릿에 입력 필드 추가: 숫자 타입의 입력 필드를 추가하여 size 데이터 속성에 바인딩합니다.
  • 스타일 동적 바인딩: style 속성을 객체로 바인딩하여 원의 width, height, line-height를 size 속성 값으로 설정합니다.
  • 스타일 속성의 두 가지 표기법: 스타일 속성 이름에 대시(-)가 포함된 경우, 따옴표로 묶거나 카멜케이스(camelCase)로 작성할 수 있습니다.
  • 배열 구문 사용: style 속성에 객체 대신 배열을 사용하여 여러 스타일을 적용하는 방법을 소개합니다.
  • 계산된 속성으로의 리팩토링 제안: 코드의 복잡성을 줄이기 위해 계산된 속성을 사용하는 것을 추천합니다.
  • 리소스 섹션의 추가 자료: 클래스와 스타일을 요소에 추가하는 방법에 대한 Vue 공식 문서 링크open in new window를 제공합니다.
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>

    <input type="number" v-model="size">

    <div
        class="circle"
        :class="[selectedColor, circle_classes]"
        :style="{
          width: `${size}px`,
          lineHeight: `${size}px`,
        },"
    >
        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>

    <input type="number" v-model="size">

    <div
        class="circle"
        :class="[selectedColor, circle_classes]"
        :style="[
        {
          width: `${size}px`,
          lineHeight: `${size}px`,
        },
        {
          transform: 'rotate(30deg)',
        },
      ]"
    >
        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>