Vue JS에서 단일 파일의 구성 요소 변수 내부 스타일에 액세스하는 방법

Vue JS에서 단일 파일의 구성 요소 변수 내부 스타일에 액세스하는 방법

템플릿 변수를 사용할 수 있는 vue 플러그인이 있습니까?<style/>태그를 지정합니다.

<template>

    <div>{{ display }}</div>

</template>


<script>

    export default {
        data(){
            return { display: 'block' }
        }
    }

</script>


<style>
    body {
        display: {{ display }}
    }
</style>

더 좋은 방법이나 플러그인이 있나요?

에 대해서는 이미 알고 있습니다.:style그리고.:class

Vue 모델(데이터 레이어)에 접속할 수 없는 것 같습니다.<Style>현재 버전의 Vue에 있습니다.Vue는 DOM 트리만 제어할 뿐 CSSOM에서의 조작에는 도움이 되지 않습니다.

WebPack 또는 기타 번들러를 사용하여 모듈화된 컴포넌트를 1개의 파일로 작성하여<template>,<script>,그리고.<style>당신의 번들러에게 변환 방법이 있을 겁니다<template>Vue 렌더 함수로 변환합니다만,style이것은 순전히 css이며, 단일 css 파일로 번들됩니다.

컴포넌트에 의해 제어되는 스타일링 값을 동적으로 설정하려면 Vue 버전을 사용하여 런타임에 삽입하는 방법을 찾아야 합니다.styled-component(원래 React에서 온 것이기 때문에).그러나 localStorage에 값을 저장하지 않으면 캐싱 기능이 손실됩니다.

https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1

인라인 스타일을 바인딩하여 스타일 속성에 원하는 것을 넣을 수 있습니다.

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

언급URL : https://stackoverflow.com/questions/49195635/how-to-access-component-variable-inside-style-in-single-file-in-vue-js