当Div变得可见时，我该如何注入JS

Question

我需要尽快保持初始页面加载，因此我尝试避免加载gmaps，paypal，stripe或类似JS，当页面加载（我只有之后我需要它们）用户单击一个按钮，并且DIV可见。

我有

<div class="container" v-if="step != '0'" v-cloak>
...
</div>

我试图将" <script src="https://js.stripe.com/v3/"></script>"放置在DIV中，但这不起作用，JS在初始页面加载期间加载。

如何将JS注入条件渲染？

Answer 1

观看步骤并将脚本附加到dom：

   data() {
       return {
           //...
           jsInjected: false,
           //...
       }
   },
   watch: {
       step(val, oldVal) {
           if(! this.isInjected && val != '0') {
                let s = document.createElement("script");
                s.type = "text/javascript";
                s.src = "https://js.stripe.com/v3/";
                document.head.appendChild(script);
                this.jsInjected = true; // prevent to append more than once.
           }
       }
   }