在vue中引入多个script标签

注意：vue是单文件，只能直接引入一个script标签，其他的需要去创建。1.可以在index.html中引入，在HTML文件中可以引入多个script标签。<head><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=lOOL1od96eckPqskoI...

大雨倾城

20217人浏览 · 2019-09-17 13:57:39

大雨倾城 · 2019-09-17 13:57:39 发布

注意：vue是单文件，只能直接引入一个script标签，其他的需要去创建。

1.可以在index.html中引入，在HTML文件中可以引入多个script标签。

   <head>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=lOOL1od96eckPqskoImqlosSrcQrsdpH"></script>
  </head>

2.利用Vue的mounted生命周期

const oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = '//g.alicdn.com/sd/smartCaptcha/0.0.1/index.js';
document.body.appendChild(oScript);

3.利用Vue的createElement方法,通过引入到组件中

components: {
    'scriptLink': {
      render(createElement) {
        return createElement(
          'script',
          {
            attrs: {
              type: 'text/javascript',
              src: '//g.alicdn.com/sd/smartCaptcha/0.0.1/index.js',
            },
          },
        )
      }
    }

4.第三种方封装一个remoteJs 组件

<template>
    <remote-js src="//g.alicdn.com/sd/smartCaptcha/0.0.1/index.js"></remote-js>
</template>
<script>
export default {
    components: {
    'remote-js': {
      render(createElement) {
        return createElement('script', {attrs: {type: 'text/javascript', src: this.src}});
      },
      props: {
        src: { type: String, required: true}
      }
    }
  }
}
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^