当div可见时，如何注入js？

Question

我需要保持初始页面的加载速度尽可能快，所以我试图避免在页面加载时加载gmaps，paypal，stripe或类似的js，因为仅在用户单击按钮和div之后才需要它们变得可见。

我有一个

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

我试图在div内放入“ <script src="https://js.stripe.com/v3/"></script>”，但这不起作用，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.
           }
       }
   }