在組件的樣式部分中使用Vue變量

是否可以使用具有組件樣式標籤的變量？基本上我已經將mixin導入到我的style標籤中，該標籤接受2種顏色以在類中創建漸變。它工作得很好，但我想要這種動態，所以我可以通過數據庫設置它。我知道我可以通過內聯綁定一個樣式，但div的漸變相當長，並且作爲mixin運行得更好。在組件的樣式部分中使用Vue變量

組件：

<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); 
}

來源

2017-08-31 Packy

我不認爲有一種方法可以輕鬆地做到這一點。如果線性漸變是一個複合屬性，它可能會更容易。這可能會讓你更輕鬆一些：https：//vuejs.org/v2/guide/class-and-style.html#Multiple-Values –

你應該使用計算性能，因爲它們很可能是實現你想要做什麼最好，最徹底的方法。他們也有對Vue公司文件關於它的整個網站：

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

基本上，你可以做這樣的事情：

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

不是傳遞的混入的，然後你可以通過頂部和底部變量。這很方便，因爲在你的計算式style（）函數中，你可以自由地做任何你想要的與JavaScript有關的東西，所以你可以有條件，表達式和其他東西。給你強大的控制你的風格;）

來源

2017-09-01 08:10:19 fweidemann14

這種方法工作並且看起來最清晰的代碼。如果Vue團隊能夠在

在組件的樣式部分中使用Vue變量

回答