Vue.js如何根据Bootstrap断点条件绑定样式？

一、修复"Whitespace was expected"报错 #

你的代码存在两个核心问题：

1. 引号嵌套语法错误：:style指令的双引号内部又使用了双引号，导致浏览器解析失败，需改用单引号区分层级。
2. 绑定值类型错误：你返回的是字符串"white"/"black"，但:style需要接收样式对象而非字符串。

修正后的代码示例（推荐用computed管理） #

<div class="footer" :style="footerStyle"></div>

<script>
export default {
  data() {
    return {
      // 定义样式对象
      whiteBg: { background: 'white' },
      blackBg: { background: 'black' }
    }
  },
  computed: {
    footerStyle() {
      // 根据Bootstrap断点返回对应样式
      return this.$bootstrap.breakpoint.md ? this.whiteBg : this.blackBg
    }
  }
}
</script>

极简写法（直接在模板中写对象） #

如果不想用computed，也可以直接在模板中返回样式对象，注意引号区分：

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

二、不依赖Bootstrap断点，用媒体查询实现 #

完全可以用CSS原生媒体查询实现，无需依赖Vue或Bootstrap的JS插件，性能更优：

/* 默认样式（对应Bootstrap xs/sm断点，屏幕<768px） */
.footer {
  background-color: black;
}

/* 对应Bootstrap md及以上断点（屏幕≥768px） */
@media (min-width: 768px) {
  .footer {
    background-color: white;
  }
}

如果需要对应Bootstrap其他断点，直接替换媒体查询的宽度即可：

• sm: 576px
• lg: 992px
• xl: 1200px

内容的提问来源于stack exchange，提问作者john