怎么在vue的style标签里面使用变量？

Question

假设我有这么一个组件如下：

<template>
    <div>
        <span class="test">文字</span>
    </div>
</template>

<script>
    export default = {
        name: '',
        data() {
            return {
                color: 'red'
            }
        }
    }
</script>

<style scope>
    .test {
        color: "这里想使用 data 里面定义的变量"
    }
</style>

我想要在 style 里面使用定义好的变量，需要怎么做？

---

我之前记得在哪看过一下可以在 style 里面使用变量。

在网上找到这篇文章：
https://cloud.tencent.com/dev...
大家可以尝试一下能不能这么用，当然我也会尝试。

Answer 1

兄弟，我刚好碰到这个问题。代码里需要不断变更CSS里样式的值（遍历+大量），并通过JS进行设置。基本上要求应该是和你差不多的。
以上所有方法我基本都试过，用了一个白天加半个晚上，现在是凌晨三点。

我说一下我的方法，我自己已验证有效：
1、演示HTML主体结构

<div class="header" ref="mycolor" @click="func">
    <div class="header-info"></div>
</div>

2、首先作用区域范围内设置“CSS变量”

<style>
/*在header区域内设置 CSS变量--bccolor */
 .header {
  --bcColor: #ffffff;
}   
   /*在子元素中使用该变量*/
    .header-info
       background-color :var(--bcColor); 
</style>

3、在JS中通过setProperty()方法修改“--bcColor”的值，从而间接改变对应子元素的（background-color）背景颜色

<script>
    methods:{
        func () {
            this.$refs.mycolor.style.setProperty("--bcColor",'white');
        }   
    }
</script>

---

PS:至少在我还清醒之前，注册上来回答一下，希望能帮到你。

Answer 2

直接绑定style啊

<span :style="{'color': color}"></span>

Answer 3

style中直接用data里面的变量好像没有方法吧，不过可以在标签上使用 :style="{color: color}"，
在不也可以引入less、sass都支持变量特性

Answer 4

这里用不了变量。
如果想要改变颜色，可以添加多一个 color 为其他颜色的类，然后改变绑定到div上的类名，从而实现通过变量改变样式的颜色

Answer 5

首先插入一个v-html,并绑定内容数据

<div v-html="menuStyleText"></div>

然后再动态输出里面的字符串内容

this.menuStyleText = `<style>
   .menu-responsive-toggle{
     background-color: ${val.colorForm.menuBackground ? val.colorForm.menuBackground + '!important' : ''};
            }
</style>`

然后你就能动态设置你的class标签了(纯原创哦...用了一下午的时候弄的)

Answer 6

在data里面设置一个值，用来存储这个变换的样式

var color = newvalue;
data() {
    return {
        changeStyle:'background:'+color
    }
}
html中直接这样就可以了
<span  style="margin-top:5px;" :style="changeStyle"></span>

这两个style会自己合并到一起的，后面你去修改changeStyle这个变量就可以改变样式了

Answer 7

最近遇到了这个, 想到了style标签毕竟也是html标签, 可以放在template中使其变成响应式,
于是下面的写法可以实现, 问题在于编辑器的支持不是很好

<template>
    <h1>{{ msg }}</h1>
    <button @click="increase(2)">count is: {{ count }}</button>
    <p>
        Edit
        <code>components/HelloWorld.vue</code> to test hot module replacement.
    </p>
    <component is="style">
        p {
            color: {{color}}
        }
    </component>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue'

function counter() {
    const count = ref(0)
    const increase = (add: number = 1) => (count.value += add)
    return { count, increase }
}

export default defineComponent({
 name: 'HelloWorld2',
 props: {
    msg: String,
 },
 setup(props) {
    const { count, increase } = counter()
    return {
        count,
        increase,
        color: computed(() => (count.value > 4 ? 'blue' : 'red')),
    }
 },
})

</script>

Answer 8

官网适合你。你应该多看看官网，然后这种问题基本问题，你有编写问题的时间看官网就解决了。

Answer 9

使用 :style 绑定然后拼接一下，如下：

:style='{backgroundImage: "url("+userInfo.userPath+")"}'

Answer 10

正解：https://blog.csdn.net/qq_3716...