如何根据引导断点将条件样式与 Vuejs 进行 v 绑定？

Question

我正在尝试为不同的引导断点分配动态样式。如果显示宽度不同，则更改位置等。所以我在 vue 中应用 v-bind 样式指令。我做得对吗？

虽然控制台给出错误 - 应该有空格。

<div class="footer" :style="{$bootstrap.breakpoint.md ? "white" : "black"}">
</div>

<script>
   white: {
        background:
          'white',
      },
  black: {
        background:
          'black',
      },
</script>

虽然没有必要使用引导制动点，但可以通过媒体查询来完成吗？

Answer 1

您应该在语句中的“white”和“black”上使用单引号，否则，javascript 会认为您正在关闭开头“，从而导致语法错误

 :style="{$bootstrap.breakpoint.md ? 'white' : 'black'}"