在组件的样式部分使用 Vue 变量

Question

是否可以将变量与组件的样式标签一起使用？基本上我已经将 mixin 导入到我的样式标签中，它接受 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

在 Vue 3 中，您现在可以在单个文件组件 v-bind

 部分

中使用 <style>，如下所示：

<style scoped>
.color-section {
  color: v-bind('sectionColor');
}
</style>

Answer 2

您应该使用计算属性，因为它们可能是实现您想要做的事情的最佳和最干净的方法。 他们还在 Vue 文档上有一个关于它的完整网站：

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

基本上，你可以这样做：

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

您可以传递顶部和底部变量，而不是传递 mixin。这非常方便，因为在计算样式 () 函数中，您可以自由地执行任何您想要的与 javascript 相关的操作，因此您可以使用条件、表达式等。让您能够强大地控制自己的风格;)

Answer 3

正如我们从@Maccesch的答案中看到的，您现在可以在vue sfc（.vue文件）的

<style></style>

部分中使用v-bind()，从vue3开始，我发现他的答案非常有用，所以我认为值得一提的是一些注意事项：

如 vue3 文档所述：

该语法与

<script setup>

配合使用，并支持 JavaScript 表达式（必须用引号括起来）：

所以当我们要在样式块中使用js表达式时，我们只需要使用引号。

另一件事需要注意，我在 vue 文档中没有看到任何关于使用

const color3 = ref('green')

的内容，当我在 vue Playground 中尝试它时，我发现它会自动解开，我们不需要需要使用

v-bind('color3.value') 

我们可以像

v-bind(color3)

一样使用它。

看一下例子：

<template>   

<h1>Header number one</h1>
<h2>Header number two</h2>
<h3>Header number three</h3>

</template>

<script setup> 
import { ref } from 'vue'

const theme = {color:'red'} 
const color2 ='blue'
const color3 = ref('green')

</script>

<style scoped>

    /* we don't need to use quotes here */
 h1 {
    color: v-bind(color2); 
} 

    /* we are using quotes here (' ') because theme.color is a javaScript expression */
 h2 {
    color: v-bind('theme.color'); 
} 

 h3 {
    color: v-bind(color3); 
} 
</style>