首页
Preview

Vue3.2 style标签内可绑定变量和v-deep的使用

从 Vue.js3.2 开始,可以将 JavaScript 变量绑定为 CSS 变量。这意味着可以动态设置 CSS 值。

如下面的例子:

<script setup lang="ts">
const color = ref('#000000')
</script>

<template>
  <div>
      <h1 class="title">选取颜色</h1>
      <input type="color" v-model="color" />
  </div>
</template>

<style scoped>
.title {
    color: v-bind(color);
}
</style>

我们声明的color变量,可以在<style>标签中,用v-bind(color)绑定。

查看生成的 CSS:

![image.p

付费内容,0.11币解锁全文 >>

版权声明:本文内容由TeHub注册用户自发贡献,版权归原作者所有,TeHub社区不拥有其著作权,亦不承担相应法律责任。 如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

点赞(0)
收藏(0)
Hedy
大家好!我是一位前端开发工程师,拥有6年以上的前端开发经验。我熟练掌握HTML、CSS、JavaScript等语言,能够灵活运用各种前端框架,如Vue、React、Uniapp、Flutter等。我注重理论与实践相结合,能够为学员提供丰富的案例和实践项目,并以生动、易懂的语言为学员讲解前端开发的核心知识和技能。我不仅注重传授技能,更关注学员的职业发展,希望通过我的教学,帮助学员成为一名优秀的前端开发工程师。

评论(0)

添加评论