vue引用并使用本地js(局部引用,全局引用)

用户是否实名的js为例

局部引用

写法1

common.js文件

// 是否实名
let isRealNameFilter = (value) => {
  if (value == 1) {
      return "已实名"
  } else {
      return "未实名"
  }
}

export {
  isRealNameFilter
}
  • realName.vue文件
<template>
  <div>
  </div>
</template>
<script>
import * as localFilter from "../../utils/common.js"
export default {
  data() {
    return {
    };
  },
  created() {
    var realStatus = localFilter.isRealNameFilter(1);
    console.log('实名状态---',realStatus);// 实名状态--- 已实名
  },
};
</script>

写法2

common.js文件

// 是否实名
let isRealNameFilter = (value) => {
  if (value == 1) {
      return "已实名"
  } else {
      return "未实名"
  }
}

export {
  isRealNameFilter
}
  • realName.vue文件
<template>
  <div>
  </div>
</template>
<script>
import {isRealNameFilter}  from "../../utils/common.js"
export default {
  data() {
    return {
    };
  },
  created() {
    var realStatus = isRealNameFilter(1);
    console.log('实名状态---',realStatus);// 实名状态--- 已实名
  },
};
</script>


写法3

common.js文件

// 是否实名
export function isRealNameFilter(value) {
  if (value == 1) {
      return "实名认证"
  } else {
      return "未实名认证"
  }
}
  • realName.vue文件
<template>
  <div>
  </div>
</template>
<script>
import {isRealNameFilter}  from "../../utils/common.js"
export default {
  data() {
    return {
    };
  },
  created() {
    var realStatus = isRealNameFilter(1);
    console.log('实名状态---',realStatus);// 实名状态--- 已实名
  },
};
</script>


写法4

common.js文件

// 是否实名
let isRealNameFilter = (value) => {
  if (value == 1) {
      return "已实名"
  } else {
      return "未实名"
  }
}

export default{
  isRealNameFilter
}
  • realName.vue文件
<template>
  <div>
  </div>
</template>
<script>
import localFilter from "../../utils/common.js"
export default {
  data() {
    return {
    };
  },
  created() {
    var realStatus = localFilter.isRealNameFilter(1);
    console.log('实名状态---',realStatus);// 实名状态--- 已实名
  },
};
</script>

全局引用:

写法1

common.js文件

// 是否实名
let isRealNameFilter = (value) => {
    if (value == 1) {
        return "已实名"
    } else {
        return "未实名"
    }
}

export {
    isRealNameFilter
}

main.js文件

import * as isRealNameFilter from "./utils/common.js"
Vue.prototype.globalFilter = isRealNameFilter;
  • realName.vue文件
<template>
  <div>
  </div>
</template>
<script>

export default {
  data() {
    return {
    };
  },
  created() {
      var realStatus = this.globalFilter.isRealNameFilter(1);
      console.log('实名状态---',realStatus);// 实名状态--- 已实名
  },
};
</script>

写法2

common.js文件

// 是否实名
let isRealNameFilter = (value) => {
    if (value == 1) {
        return "已实名"
    } else {
        return "未实名"
    }
}

export {
    isRealNameFilter
}

main.js文件

import {isRealNameFilter}  from "./utils/common.js"
Vue.prototype.globalFilter = isRealNameFilter;
  • realName.vue文件
<template>
  <div>
  </div>
</template>
<script>

export default {
  data() {
    return {
    };
  },
  created() {
      var realStatus = this.globalFilter(1);
      console.log('实名状态---',realStatus);
  },
};
</script>

写法3

common.js文件

// 是否实名
export function isRealNameFilter(value) {
    if (value == 1) {
        return "实名认证"
    } else {
        return "未实名认证"
    }
}

main.js文件

import {isRealNameFilter}  from "./utils/common.js"
Vue.prototype.globalFilter = isRealNameFilter;
  • realName.vue文件
<template>
  <div>
  </div>
</template>
<script>

export default {
  data() {
    return {
    };
  },
  created() {
       var realStatus = this.globalFilter(1);
      console.log('实名状态---',realStatus);
  },
};
</script>

写法4

common.js文件

// 是否实名
function isRealNameFilter(value){
    if (value == 1) {
        return "已实名"
    } else {
        return "未实名"
    }
}

export default{
    isRealNameFilter
}

main.js文件

import {isRealNameFilter}  from "./utils/common.js"
Vue.prototype.globalFilter = isRealNameFilter;
  • realName.vue文件
<template>
  <div>
  </div>
</template>
<script>

export default {
  data() {
    return {
    };
  },
  created() {
      var realStatus = this.globalFilter(1);
      console.log('实名状态---',realStatus);
  },
};
</script>

vue中引入在线JS(链接型的js、url类型的js)
vue项目中引用并使用本地js

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容