vue.js - 如何使用 Vue 3 更改 div 的背景颜色？

Question

我在模板中有以下行：

    <div class="card" @click="!state.clicked" :style="state.style">

在脚本里面这段代码：

<script lang="ts">
import { ref, computed, reactive } from "vue";

export default {
  name: "Card",

  setup() {
    const state = reactive({
      clicked: false,
      style: computed(() => {
        backgroundColor: state.clicked ? "red" : "white";
      })
    });

    return {
      state
    };
  }
};
</script>

但我的颜色没有改变。我点击的标志正确切换，但我无法应用背景颜色。

不确定这是反应性问题还是我设置背景颜色的方式。

有任何想法吗 ？

Answer 1

您的计算属性不返回任何内容，并且不返回任何内容意味着它会自动返回未定义。用括号括起来

  style: computed(() => ({
    backgroundColor: state.clicked ? "red" : "white"
  }))