vue.js - vue中 props中的变量能否在less中使用

问题描述

问 题

<template>

<div class="floor">
    <text class="name">{{conf.name}}</text>
</div>

</template>

<style scoped lang="less">

// 想在这里使用props传递过来的值
@background: {{conf.background}};

.floor {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 120px;
}
.name {
    height: 72px;
    line-height: 72px;
    padding-left: 60px;
    padding-right: 60px;
    color: #fff;
    font-size: 42px;
    text-align: center;
    border-radius: 50px;
    background-color: @background;
}

</style>

<script>
export default {

 props: ['conf']

}
</script>

解决方案

不能，这是运行时的，css怎么啥时候支持变量了？
要达到这种效果只能使用v-bind去绑定class或者style

这篇关于vue.js - vue中 props中的变量能否在less中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！