vue3.2中style使用v-bind

原创已于 2023-11-09 13:42:14 修改 · 733 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #uni-app #小程序

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

前端同时被 3 个专栏收录

24 篇文章

订阅专栏

11 篇文章

订阅专栏

uniApp

3 篇文章

订阅专栏

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

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>