vue3在css中使用js中变量(v-bind() in CSS)

曾几何时,有么有过被不能用js来控制css中的变量属性而困惑,你可能说直接获取dom获取,是不是不太人性

vue3.2中引入了 style v-bind 可以实现以上的功能

<template>
  <div class="text">hello</div>
</template>
<script setup>
  import { reactive, ref } from 'vue'
  const state = reactive({
    blue: 'blue'
  })
  const red = ref('red')
</script>
<style>
  .text {
    color: v-bind(state.blue);
    background: v-bind(red);
  }
</style>

预览效果

版权声明:
作者:歪脖札记
链接:https://www.zxlmx.com/zhaji/qianduan/vue3/143.html
来源:歪脖札记
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
打赏
< <上一篇
下一篇>>