Vue 获取窗口宽度

在Vue开发中，有时需要获取窗口宽度用于适应布局或进行其他一些操作。 这里介绍几种获取窗口宽度的方法。

1. window.innerWidth

使用window.innerWidth可以获取窗口的内部宽度。

const width = window.innerWidth;
console.log(width);

在Vue中，可以将其保存在data中，以在模板中使用它。

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

然后可以在模板中使用它。

<div>Window Width: {{windowWidth}}</div>

2. document.documentElement.clientWidth

使用document.documentElement.clientWidth可以获取文档根元素的宽度。

const width = document.documentElement.clientWidth;
console.log(width);

在Vue中，也可以将其保存在data中。

data() {
  return {
    windowWidth: document.documentElement.clientWidth
  }
}

并在模板中使用它。

<div>Window Width: {{windowWidth}}</div>

3. 监听窗口宽度的变化

如果需要在窗口大小改变时获取宽度，可以添加窗口大小事件侦听器。

mounted() {
  window.addEventListener('resize', this.handleResize);
},
methods: {
  handleResize() {
    this.windowWidth = window.innerWidth;
  }
}

此时，在窗口改变大小时，handleResize方法会被调用并更新windowWidth的值。

总结

以上是Vue获取窗口宽度的几种方法，可以根据实际情况选择使用哪种方法。