javascript - 计算属性对 VueJS 中的 window.innerwidth react

Question

基本上，我需要的是一个计算属性，当 window.innerwidth 等于或小于 768px 时返回 true，当 false 时返回 false它高于 768px。

我做了什么:

computed: {
  isMobile() {
    if (window.innerWidth <= 768) {
      return true
    } 
    return false
  }
}

但这只计算该属性一次，如果我稍后调整窗口大小，它不会对更改使用react。我能做什么？

Answer 1

像这样向窗口添加一个事件监听器:

new Vue({
  el: "#app",
  data() { return { windowWidth: window.innerWidth } },
  mounted() {
    window.addEventListener('resize', () => {
      this.windowWidth = window.innerWidth
      console.log(this.isMobile)
    })
  },
  computed: {
    isMobile() {
      return this.windowWidth <= 768
    }
  }
})