Vue로 배경색을 동적으로 변경하는 방법은 무엇입니까?

6689 단어 beginnerstutorialvuewebdev
얘들아! Vue를 사용하여 동적으로 변경하는 방법을 이해하는 가장 쉬운 방법은 전체 배경색 변경만큼 큰 것을 사용하는 것입니다. 이 프로젝트는 Vue로 시작하는 가장 간단한 방법인 Vue 인스턴스를 사용합니다.

먼저 index.html부터 시작하겠습니다.

HTML 만들기:



우리는 기본 구조(! 또는 html5 - VSCode에서)를 만듭니다.
그런 다음 id=”app”인 div를 추가합니다. Vue 인스턴스가 마운트될 위치입니다.
그런 다음 스크립트를 추가합니다. Vue CDN( <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> )을 사용하고 자체 스크립트를 연결합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">
    <title>BG Change</title>
</head>
<body>
    <div id = "app">  

     </div>  
     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
       <script src="script.js"></script>  
   </body>  
</body>
</html>


JS 만들기:



이제 인스턴스를 생성하겠습니다.
필요한 것은 변수를 새로운 Vue로 만든 다음 html에서 인스턴스를 마운트할 위치를 지정하는 것입니다. 우리는 이전에 우리의 div 앱을 호출했기 때문에 우리가 작성할 것입니다.
데이터로는 bgColor 변수만 필요하고 16진수로 흰색을 지정합니다.

var app = new Vue({
    el:'#app',
    data:{
        bgColor: '#ffffff',
    },
})


이제 HTML로 돌아갑니다.



이제 다른 div를 추가하여 배경을 포함하고 변수 bgColor로 스타일을 바인딩합니다. 속성 스타일에 이전에 콜론이 있는 방법에 유의하십시오. 이는 v-바인드의 바로 가기입니다. 내부 스타일은 { }이고 - 대시가 있는 용어에는 camelCase를 사용합니다. 일반적인 "Hello World!"와 함께 간단한 h1을 넣습니다. 그런 다음 라벨과 색상을 입력하여 색상을 변경합니다.
입력, 선택, 텍스트 영역 및 기타 구성 요소는 v-model을 사용해야 하고 그렇지 않으면 v-bind를 사용해야 하는 유일한 구성 요소입니다.
색상 선택기는 입력이므로 변수 bgColor 없이 v-모델을 사용합니다.
또한 입력의 :style에 변수를 추가하여 보기 흉한 경계선이 생기지 않도록 했지만 원하는 경우 무시할 수 있습니다.

<div id = "app">  
        <div class="full-height " :style="{backgroundColor: bgColor }">
            <h1>Hello World!</h1>
            <label for="head">Background Color
            <input type="color" id="head" name="head"
            :value="bgColor" v-model="bgColor" :style="{backgroundColor: bgColor, borderColor: bgColor }" >
             </label>
        </div>


CSS:



추가로 링크가 있는 html에 CSS를 추가하고 다음 코드를 추가하여 완전히 중앙에 배치할 수도 있습니다.

*{
    margin: 0;
    padding: 0;
}

.full-height{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}



결국에는 이런 것을 얻게 될 것입니다! 동적으로 수행하는 방법과 동시에 Vue에 대해 약간 설명하려고 했습니다.

자세한 내용은 Vue 설명서를 참조하세요.
Vue Instance
Vue Docs
MSSQL DB용 Docker를 사용하여 Debian 11에서 Datafi Edge Server를 설정하는 방법
MVVM 데이터 바인딩을 사용하여 WPF 체크박스 목록을 만드는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage