Vue에서 스타일을 설정하는 방법

방법: 1. 태그의 스타일 속성을 사용하여 인라인 스타일을 추가합니다. 2. "v-bind" 명령을 사용하여 바인딩을 통해 스타일 스타일을 설정합니다. 3. 다음 구문을 사용하여 스타일에 vue 속성을 설정합니다. ":style="obj" " 또는 ":style="[obj,obj1...]"".

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

Vue가 스타일을 설정합니다

1. 인라인 스타일을 직접 추가합니다

2. 바인딩을 통해 스타일을 설정합니다.

3. vue 속성을 스타일에 설정합니다(vue 속성은 여러 개일 수 있음)

<div id="box">
            <!--直接添加样式-->
            <p style="background-color: blue;">sssss</p>
            <!--绑定样式-->
            <p v-bind:style="&#39;background-color: red;&#39;">sssss</p>
            <!--将vue中的属性作为样式设置-->
            <p :style="obj">sssss</p>
            <!--将多个属性作为样式设置-->
            <p :style="[obj,obj1]">sssss</p>
        </div>
        <script type="text/javascript">
            var vm=new Vue({
                el:"#box",
                data:{
                    obj:{
                        backgroundColor:"gold"
                    },
                    obj1:{
                        fontSize: "30px"
                    }
                },
            });
        </script>

관련 권장 사항: "vue.js 튜토리얼"

위 내용은 Vue에서 스타일을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!