在组件的样式部分中使用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变量

回答