如何在Vuejs中获取类的属性css？答案

【问题标题】：How to get attribute css of class in Vuejs?如何在Vuejs中获取类的属性css？
【发布时间】：2020-12-29 09:34:48
【问题描述】：

我无法在我的项目中获取 Vuejs/nuxtjs 中类的属性 css。

我的班级：'only-small' 有属性：'display:none' if mediaquery

如果这种方式是不可能的，有人可以建议另一种方法来解决我的问题而不使用窗口对象（如果刷新页面 - 未定义窗口，window.innerWidth 总是错误）和 vue-screen 插件

大小.vue：

在视口

<button class="select-btn select-btn--size only-small">
       <span class="select-btn__label"></span>
       <svg class="icon icon--down">
             <use xlink:href="/global.svg#down"></use>
       </svg>
</button>

在视口中 >= 768

<div class="select size-select small-font only-large size-select--small">
        <div class="select__headline"></div>
        <div class="select__items no-scrollbar">
            <div>
                <button class="select__label" ></button>
            </div>
        </div>
 </div>

info.vue

<template>
  <div>
    <Size></Size> 
    <AddToCart></AddToCart>
  </div>
</template

scss:

@media screen and (min-width: 768px) {
    .only-small {
        display: none !important;
    }
}

点击添加到带有视口的购物车
点击添加到带有视口的购物车 > 768：执行其他操作

当我调整视口大小时，没有添加或删除任何类、元素……。只有 css 的属性适用。

【问题讨论】：

您是否尝试使用视口大小有条件地将类应用于元素，然后选择 .only-small 元素来隐藏它们？如果是这样，您可以使用 vue-mq (digitalocean.com/community/tutorials/vuejs-vue-media-queries) 来帮助您进行条件渲染。
非常感谢，但它不像 vue-screen 插件那样工作

标签： javascript css vue.js class nuxt.js

【解决方案1】：

实际上，我并不完全了解您需要什么。但是，如果您想根据访问者媒体查询显示您的元素，您可以使用带有计算属性的 v-show 指令。

<button v-show="mediaQuery" class="select-btn select-btn--size only-small">
   <span class="select-btn__label"></span>
   <svg class="icon icon--down">
         <use xlink:href="/global.svg#down"></use>
   </svg>

<div v-show="!mediaQuery" class="select size-select small-font only-large size-select--small">
    <div class="select__headline"></div>
    <div class="select__items no-scrollbar">
        <div>
            <button class="select__label" ></button>
        </div>
    </div>

data() {
return {
  mediaQuery: true
}

 computed: {
checkMedia() {
  if (window.matchMedia('(min-width:768px')) {
    this.mediaQuery = false
  }
},

【讨论】：