如何在vueJs 3中呈现vue模板之前隐藏时隙元素？

Question

看到这些图片我不想在这里显示这些元素

​

请参阅下面的代码示例sample.blade.php

<create-form id= "create_form" title="Sample Form" >
    <div class="col-md-6">
      <label class="form-label" for="multicol-username">Username</label>
      <input type="text" id="multicol-username" class="form-control" placeholder="john.doe" name="ma_user_id" data-type="varchar" required>
    </div>
    <div class="col-md-6">
      <label class="form-label" for="multicol-email">Email</label>
      <div class="input-group input-group-merge">
        <input type="text" id="multicol-email" class="form-control" placeholder="john.doe" aria-label="john.doe" aria-describedby="multicol-email2" name="password" data-editmode="false" data-editname="email">
        <span class="input-group-text" id="multicol-email2">@example.com</span>
      </div>
    </div>
</create-form>

createForm.vue

<template>
  <div class="card mb-4" v-show="showForm">
    <h5 class="card-header">{{title}}</h5>
    <form class="card-body" id="createForm" enctype="multipart/form-data" ref="createForm">
      <div class="row g-3">
        <slot></slot>
        <div class="pt-4">
          <button type="submit" class="btn btn-primary me-sm-3 me-1" id="save_return">Submit</button>
          <button type="reset" class="btn btn-label-secondary" @click="hideForm">Cancel</button>
        </div>
      </div>
    </form>
  </div>
</template>
<script>

export default {
  props: ['title'],
  setup() {},
  data() {
    return {
    }
  },
  created() {
  },
  mounted() {

  },
  methods: {
  },
}
</script>

app.js

require('./bootstrap')


import { createApp } from 'vue'
import createForm from './components/createForm';

const app = createApp({})

app.component('create-form', createForm);

app.mount('#app')

Answer 1

听起来，您希望由php后端呈现的模板在vue能够处理之前是不可见的，尽管我不能100%肯定是这样的。

如果是这样的话，您可以使用v-cloak directive

这个指令只需要在没有构建步骤的设置中。

当使用-DOM模板时，可能会出现“未编译模板的闪光灯”：用户可能会看到原始的胡子标签，直到挂载的组件将其替换为呈现的内容。

V斗篷将保留在元素上，直到挂载相关的组件实例。结合CSS规则(如[v-cloak] { display: none } )，它可以用于隐藏原始模板，直到组件准备就绪为止。

<create-form id="create_form" title="Sample Form" v-cloak>
...

<style>
  [v-cloak] { display: none }
</style>