コンポーネントのスタイルセクションにVue変数を使用

Question

コンポーネントのスタイルタグで変数を使用することはできますか？基本的に私はクラス内にグラデーションを作成するために2つの色を受け取るスタイルタグにミックスインをインポートしました。それは素晴らしいですが、私はこの動的なので、データベースを介して設定することができます。インラインでスタイルをバインドすることはできますが、divのグラデーションはかなり時間がかかり、mixinとしてうまく機能します。

コンポーネント：

<template> 

    <section class="section" v-bind:class=" { 'color-section' : content.gradient_color_one }"> 

     <div class="container"> 

      <div class="columns"> 

       <div class="column is-half"> 

        <h2 class="is-size-4" v-html="content.title"></h2> 

        <div class="section-content" v-html="content.description"></div> 

        <a class="button" :href=" '/'+ content.button_link">{{ content.button_text }}</a> 

       </div> 

       <div class="column"> 

        <img :src="content.image" :alt="content.title" /> 

       </div> 

      </div> 

     </div> 

    </section> 

</template> 

<script> 
    export default { 

     props:[ 
      'content' 
     ], 

    } 
</script> 

<style lang="scss" scoped> 

    @import "../../sass/helpers/mixins"; 

    .color-section{ 
     color:red; 
     @include diagonalGradient(content.gradient_color_one , content.gradient_color_two); 
    } 

</style> 

ミックスイン

@mixin diagonalGradient($top, $bottom){ 
    background: $top; 
    background: -moz-linear-gradient(-45deg, $top 0%, $bottom 100%); 
    background: -webkit-gradient(left top, right bottom, color-stop(0%, $top), color-stop(100%, $bottom)); 
    background: -webkit-linear-gradient(-45deg, $top 0%, $bottom 100%); 
    background: -o-linear-gradient(-45deg, $top 0%, $bottom 100%); 
    background: -ms-linear-gradient(-45deg, $top 0%, $bottom 100%); 
    background: linear-gradient(135deg, $top 0%, $bottom 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#92fe9d', endColorstr='#00c8ff', GradientType=1); 
} 

Answer 1

彼らはおそらくあなたが何をしようとして達成するための最善かつクリーンな方法ですとあなたが、計算されたプロパティを使用する必要があります。代わりにミックスインを渡すので、あなたがして渡すことができる

computed: { 
    style() { 
    return 'background: ' + this.top + ';' + '...' 
    } 
} 

： は、彼らはまた、Vueのドキュメントでそれについてのサイト全体を持っている：

https://vuejs.org/v2/guide/class-and-style.html

を基本的に、あなたはこのような何かを行うことができますトップとボトムの変数。計算されたstyle（）関数では、必要なjavascript関連のものを自由に行うことができるので、条件式、式などにすることができるので、これは非常に便利です。 ）あなたのスタイルを強力にコントロールできます;