web-dev-qa-db-ja.com

Vue JSの単一ファイルでスタイル内のコンポーネント変数にアクセスする方法

単一ファイルコンポーネントのサイド<style/>タグでテンプレート変数を使用できるようにするvueプラグインはありますか？.

<template>

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

</template>


<script>

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

</script>


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

これを行うためのより良い方法/プラグインはありますか？

私はすでに:styleと:classについて知っています

javascriptvue.jsvuejs2vue-componentvue-cli
7
Yogesh Jagdale

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

インラインスタイルをバインドすることで、スタイル属性に好きなものを入れることができます。

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

現在のバージョンのVueでは<Style>内のVueモデル（データレイヤー）にアクセスする方法はないと思います。VueはDOMツリーですが、CSSOMでの回避には役立ちません。

おそらくWebPackまたは他のバンドラーを使用していて、モジュール化されたコンポーネントを<template>、<script>、および<style>がある単一のファイルに書き込んでいます。バンドラーには<template>をVueレンダリング関数に変換する方法がありますが、ここでのstyleは純粋にcssであり、単一のcssファイルにバンドルされます。

コンポーネントによって制御されるスタイリング値を動的に設定する場合は、実行時にそれらを挿入する方法を見つける必要があります。つまり、Vueバージョンのstyled-component（ React元々）から来たので。しかし、localStorageにも値を保存しない限り、キャッシュ機能は失われます。

0
Leo Li