Vue的v-show实践

v-show 用于根据条件显示或隐藏 DOM 元素。
与 v-if 不同， v-show 并不会移除元素，它只是通过修改元素的 CSS display 属性来控制显示与隐藏。 即使条件为 false，元素依然会存在于 DOM 中，只是隐藏了。

拿一篇来做实例，我们需要修改它。
参考随笔 https://www.cnblogs.com/insus/p/22982421

当文件不存在，不想错误的信息呈现在iframe内嵌框架中，而是显示自定义通俗信息。

html markup，将修改如下：

<div class="right"  style="margin-left: 3px; width: 888px;">
  <iframe v-show="hasFile"  id="frameContainer" loading="lazy" style="width: 100%; height: 500px; border: 0px none #00000000"></iframe>
  <div  v-show="!hasFile" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#999;">
    文档不存在或被删除
  </div>
</div>

从上面的代码中，有个代码关键词v-show。

以下为可复制代码：

 const app = createApp({
     setup() {
         const loading = ref(false);
         const error = ref(null);
         const hasFile = ref(true);

         const onView = async (item) => {
             const iframe = document.getElementById('frameContainer');
             if (!iframe) return;

             loading.value = true;
             error.value = '';

             let img1 = '/temp/' + item.ImageFileName;
             const urls = [img1]; //传入一个或多个文件路径。
             const results = await Promise.all(urls.map(checkFileExists))
             hasFile.value = results[0];


             if (hasFile.value) {
                 iframe.src = img1;
             }
         }

         const checkFileExists = async (url) => {
             try {
                 const res = await fetch(url, {
                     method: 'HEAD',
                     cache: 'no-store',
                 })
                 return res.ok
             } catch (err) {
                 return false
             }
         };

         return {
             loading,
             error,
             hasFile,
             onView
         };
     }
 });

 app.mount('#app');