VueJS中为样式设置多条件判断的实现方法

嘿，我来帮你搞定这个多条件样式绑定的问题～你之前遇到的问题根源在于用了逗号,来组合条件，但它并不是你想要的“逻辑且”效果——在JavaScript里，逗号是逗号运算符，只会返回最后一个表达式的结果，所以你的代码其实只生效了window.innerWidth<1200这一个条件，这就是为什么单个条件正常、多条件却没效果的原因。

要实现“当SearchFiltersToggle为false 且 窗口宽度小于1200px时显示flex，否则用block”的需求，你需要用JavaScript的**逻辑与运算符&&**来组合两个条件，正确的写法如下：

<div class="objectsList" v-bind:style='{ "display": (!SearchFiltersToggle && window.innerWidth < 1200) ? "flex" : "block" }'>
  <!-- 你的内容 -->
</div>

额外的响应式优化建议 #

直接在模板里用window.innerWidth有个小问题：窗口大小变化时，这个值不会自动触发Vue的响应式更新，样式也就不会跟着变。如果需要窗口resize时动态调整样式，建议把窗口宽度存到响应式数据里：

• 第一步，在组件的data里定义响应式变量：

  data() {
    return {
      windowWidth: window.innerWidth
    }
  }
  

• 第二步，在组件挂载后添加窗口resize监听：

  mounted() {
    window.addEventListener('resize', () => {
      this.windowWidth = window.innerWidth
    })
    // 记得在组件销毁时移除监听，避免内存泄漏
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', () => {
        this.windowWidth = window.innerWidth
      })
    })
  }
  

• 第三步，模板里改用这个响应式变量：

  <div class="objectsList" v-bind:style='{ "display": (!SearchFiltersToggle && this.windowWidth < 1200) ? "flex" : "block" }'>
    <!-- 你的内容 -->
  </div>
  

这样窗口大小变化时，样式就会自动跟着更新啦～

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