vue.js 在css中使用v-bind将变量绑定到css属性

5sxhfpxr  于 2023-01-05  发布在  Vue.js
关注(0)|答案(1)|浏览(276)

视图看不到此样式。我做错了什么?

<div class="div">div</div>

color = 'red'

.div {
  background: v-bind(color);
}

polkgigr

polkgigr1#

您的代码应该与Vue3工作正常,我没有看到任何问题,在动态样式绑定。

这是现场演示**:**

<script src="https://unpkg.com/vue@next"></script>

<div id="app"></div>

<template id="appTemplate">
    <div class="div">div</div>
</template>

<script>
const app = Vue.createApp({
  template: document.getElementById("appTemplate").innerHTML,
  data() {
    return {
      color: 'red'
    };
  }
})

app.mount('#app')
</script>

<style scoped lang="scss">
.div {
  background-color: v-bind(color);
}
</style>

相关问题