H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

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

<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…
大家可以尝试一下能不能这么用,当然我也会尝试。

回答:

兄弟,我刚好碰到这个问题。代码里需要不断变更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:至少在我还清醒之前,注册上来回答一下,希望能帮到你。

回答:

直接绑定style啊

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

回答:

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

回答:

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

回答:

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

回答:

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

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

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

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

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

回答:

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

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

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

回答:

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

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

回答:

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

回答:

最近遇到了这个, 想到了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>

本文地址:H5W3 » 怎么在vue的style标签里面使用变量?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址