vue.js - 使用 Vue.js 计算屏幕大小

Question

我正在尝试使用 Vue 获取屏幕尺寸

直到现在我都有这个，但现在没有什么对我有用

data: () => ({
WindowsSize: '',
 methods: {

 elem() {
  this.size = window.innerWidth;
  return this.size;
 },
 mounted() {
  if (this.elem < 767){ //some code }
  }
 })

目标是使用我的 div 显示和隐藏元素

<div v-if="WindowsSize== ''" />

某种方式得到我，到目前为止搜索网络对我来说还没有用

标签： vue.js

Answer 1

听起来您正在尝试根据屏幕宽度显示/隐藏元素。这可以通过CSS 媒体查询更简单地完成：

<template>
  <div class="large">...</div>
</template>

<style>
/* hide by default */
.large {
  display: none;
}

/* show when screen is at least 600px wide */
@media (min-width: 600px) {
  .large {
    display: block;
  }
}
</style>

演示