vue3在style中使用data定义的变量

最新推荐文章于 2024-03-28 14:43:44 发布

原创最新推荐文章于 2024-03-28 14:43:44 发布

· 1.1k 阅读

2 ·

版权

文章标签：

#前端 #vue.js #javascript

vue3 专栏收录该内容

4 篇文章

订阅专栏

在style标签中使用v-bind绑定相应的变量

<template>
  <div class="text">hello</div>
</template>

<script>
  export default {
    data() {
      return {
        color: 'red',
        font: {
          size: '2em'
        }
      }
    }
</script>

<style>
  .text {
    color: v-bind(color);

    /* expressions (wrap in quotes) */
    font-size: v-bind('font.size');
  }
</style>

参考：https://github.com/vuejs/rfcs/pull/231