vue3.2中style使用v-bind

奔跑的代码！

已于 2023-11-09 13:42:14 修改

阅读量683

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue3.0 前端 uniApp 文章标签： vue.js uni-app 小程序

于 2023-11-09 11:44:43 首次发布

本文链接：https://blog.youkuaiyun.com/zhgweb/article/details/134308108

前端同时被 3 个专栏收录

24 篇文章

订阅专栏

11 篇文章

订阅专栏

uniApp

3 篇文章

订阅专栏

文章讲解了如何在Vue3.2中利用`v-bind`实现CSS样式动态绑定，以适应系统安全区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3.2中style使用v-bind

自我记录

这个功能真的是太 NB 了！！！！
官网地址：https://cn.vuejs.org/api/sfc-css-features.html#v-bind-in-css
请添加图片描述
在这里插入图片描述

<script setup lang="ts">
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>

<template>
  <view class="settings-page"></view>
</template>

<style lang="scss" scoped>
.settings-page {
  width: 100%;
  height: 100vh;
  background-color: red;
  padding-bottom: v-bind("safeAreaInsets?.bottom + 'px'");
}
</style>

太方便了!!!