如何使用 Vue 3 更改 div 的背景颜色？答案

【问题标题】：How to change background color of a div using Vue 3?如何使用 Vue 3 更改 div 的背景颜色？
【发布时间】：2020-09-29 00:49:12
【问题描述】：

我在模板中有以下一行：

    <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>

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

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

有什么想法吗？

【问题讨论】：

@click="state.clicked=!state.clicked" ?
遗憾的是没有变化
刚刚将其复制到代码和框...以使其简短计算不返回任何内容
这对你有用吗？我没有看到任何变化
我没有运行 vue3 - 导入问题，所以还没有 XD

标签： vue.js vuejs3

【解决方案1】：

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

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

【讨论】：