内联样式 Vue 3 未访问变量

Question

我正在尝试将道具传递给我的内联 :style 在 Vue 3 中，但由于某种原因我无法做到这一点。这是我的代码。感谢任何帮助。

<template>
    <div style="width: 100vw;" :style="{'min-height': props.rem}"></div>
</template>

const props = defineProps({
  rem: Number
})

Answer 1

尝试将 'rem' 添加到 min-height 风格道具：

const app = Vue.createApp({
  data() {
    return {
      nr: 10,
    };
  },
})
app.component('child', { 
  template: `
    <div class="child" style="width: 100vw;" :style="{'min-height': rem+'rem'}"> rem = {{ rem }}</div>
  `,
  props: {
    'rem': {
      type: Number,
      default: 5
    }
  },
})
app.mount('#demo')

.child {
  background-color: purple;
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <child :rem="nr"></child>
</div>

内联样式 Vue 3 未访问变量

Variable isn't being accessed by inline style Vue 3

html

css

vue.js

vuejs3