Javascript 如何使用css或js在vue.js中根据条件设置打印页面中显示无？

我在vue框架中工作，目前正在为我的应用程序打印网页。我需要一个条件的解决方案。我已经在下面谈到了这一点

<template>

      <div id = "intro" style = "text-align:center;">
        <div
        v-for="report in reports"
        :key="report.property"
        :class="['Section1', { 'non-print-css' : noprint }]">
          <div class="Icon" id="printReport_AId" v-if="isOverview">
             <font-awesome-icon :icon="report.icon" @click="printWindow()"/>
        </div>
      </div>

     <div class="logo"> this text should  be none when printing . if the section1 is none in screen. </div>
      </div>
</template>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#intro',
            data: {
               timestamp: ''
            },
            created() {

            },
            methods: {
              printWindow() {
      const curURL = document.location.href;
      history.replaceState(history.state, '', '/');
      const originalTitle = document.title;
      document.title = '. ';
      window.print();
      document.title = originalTitle;
      history.replaceState(history.state, '', curURL);
    },

     computed: {
       noprint() {
      const printicon = document.getElementById('printReport_AId');
      if (printicon.style.display === 'none') {
        return true;
      }
      return false;
      },
   }

            }
         });
      </script>
<style>
.non-print-css {
  // i have to set the display none for logo when its printed.
}

</style>

我有两个班

第一节 标志 条件：

如果第1节显示无，则当我打印页面时，徽标 不应打印

我在computed中添加了条件，以检查截面显示是否正确 无如果它是真的，它应该在我们设置@print的地方执行css。 徽标显示为无

我需要一个适当的解决方案，无论是在css或js

---

您可以使用和应用特定于打印的样式

@media print {
    .non-print-css {
        display: none;
    }
}

如果第1节显示无。。。表示元素已渲染但未显示。您必须为第1节提供v-show指令，而不是v-if。。。当设置为false v-show时，元素将显示：无。 然后当我打印页面时，不应该打印徽标。。。因此，如果Section1V-show设置为false，我们将无法正确打印。。。。在这种情况下，我们应该在数据中创建一个变量，并将其绑定到Section1V-show，这样当该变量为false时，元素就有display:none，所以我们不打印。。。。让我们调用变量isSection1…现在在我们的方法上，只有isSection1为真时，我们才打印。。。以下是它应该是什么： 数据：{ isSection1:false，//false表示section1显示：无 时间戳： }, 方法：{ 打印窗口{ //仅当第1节没有显示时：无 如果这是第1节{ const curURL=document.location.href； history.replaceStatehistory.state“/”； const originaltile=document.title； document.title='； window.print； document.title=原始标题； history.replaceStatehistory.state，curURL； } } }

---

我已经修复了它。部分但元素id为null，事件未被监听

将v-bind添加到logo类

添加安装和计算如下

---

这应该只在条件通过时执行，否则这将是整个网页的通用。我需要在打印页面中删除徽标，但这将删除报表图标。当满足所需条件时，您可以对类设置条件，使其仅应用于所需的元素。不，这不是我想要的情况，如果我右键单击并提供打印选项，则它不应打印

mounted() {
    window.addEventListener('print', this.noprint);
    },

computed(){
    noprint() {
        const printicon = document.getElementById('printReport_AId');
        if (printicon != 'null') {
          return true;
        }
        return false;
    },
  },