v-bind in css

v-bind in css

在vue3中支持在css中使用v-bind绑定变量

传统var

当我们使用var()时都需要预先在使用节点的祖先节点中编写所需的CSS变量，如果想要该CSS变量与业务代码中的某些变量产生联动，则需要已内联的方式将JS变量写入节点的Style中

<template>
    <p :style="cssVars"></p>
</template>

<script setup>
const textColor = '#fff'
const cssVars = {
   '--color': textColor
}
</script>

<style>
p {
  color: var(--color);
}
</style>

v-bind

在JS中先对需要用的数据进行定义：

let width = 400

let height = '400px'

let obj = {
  width: '200px',
  height: '200px',
}

let transition = 'cubic-bezier(0, 1.5, .6, 1)'

然后这些数据直接在css中进行使用，使用v-bind()进行绑定

<style scoped lang="css">
.div {
  /* 拼接  这个在css中没有问题，不过在scss，less中会出现错误*/
  width: v-bind(width + 'px');
  /* 直接使用 */
  height: v-bind(height);
}

.span {
  width: v-bind('obj.width');
  height: v-bind('obj.height');
}

/* 作为其中一项属性值使用 */
.span_title {
  transition: all .9s v-bind(transition);
}

</style>

在less中使用

<style scoped lang="less">
// 使用变量承接
@height: v-bind(height);

.div {
  height: @height;
  .span {
    @width: v-bind('obj.width');
    /* 对象调用 */
    width: @width;
    height: v-bind('obj.height');
    .span_title {
      @transition: v-bind(transition);
      /* 组合使用 */
      transition: all .9s @transition;
    }
  }
}
</style>