vue监听浏览器窗口宽度的变化

created() {
//页面初始化获取页面的宽度,小于500 show为true
    this.screenWidth = document.body.clientWidth
    if (this.screenWidth < 500) {
      this.show = true
    } else {
      this.show = false
    }
  },

 mounted() {
    this.watchWidth()
  },
  methods: {
    // 获取浏览器宽度
    watchWidth() {
      // const that = this
      window.onresize = () => {
        return (() => {
          window.screenWidth = window.innerWidth
          this.screenWidth = window.screenWidth
        })()
      }
    }
}

watch: {
    // 监听浏览器窗口宽度,当浏览器窗口小于500时,显示详情
    screenWidth(val) {
      if (val < 500) {
        this.show = false
      } else {
        this.show = true
      }
    }
  },