vue判断字符串开头是http或者https

在 Vue 中判断字符串是否以 http 或 https 开头，可以通过以下步骤实现：

方法一：使用 startsWith() 方法 // 在 Vue 组件的方法或计算属性中 isExternalLink(url) { return url?.startsWith('http://') || url?.startsWith(' '); } 方法二：使用正则表达式（推荐） isExternalLink(url) { return /^https?:\/\//i.test(url || ''); }

说明：

^https?:\/\/ 匹配以 http:// 或 开头的字符串。i 表示不区分大小写（如 HTTP:// 也会被匹配）。使用可选链操作符 ?. 和默认空字符串防止 url 为 null 或 undefined 时报错。 在 Vue 模板中使用 <template> <a :href="url" :target="isExternalLink(url) ? '_blank' : '_self'">链接</a> </template> <script> export default { data() { return { url: ' example ' } }, methods: { isExternalLink(url) { return /^https?:\/\//i.test(url || ''); } } } </script> 处理边缘情况 空值处理：如果 url 可能为空，使用 url || '' 确保传入的是字符串。协议相对 URL：若需排除 //example 这种形式，正则表达式保持不变即可，因为它只匹配明确带有 http 或 https 的情况。 示例：动态绑定图片路径 <template> <img :src="fullImageUrl" alt="示例图片"> </template> <script> export default { data() { return { imageUrl: 'user-uploaded/image.jpg', basePath: ' cdn.example /' } }, computed: { fullImageUrl() { return this.isExternalLink(this.imageUrl) ? this.imageUrl : `${this.basePath}${this.imageUrl}`; } }, methods: { isExternalLink(url) { return /^https?:\/\//i.test(url || ''); } } } </script>

关键点总结：

正则效率：正则表达式更简洁且能直接处理大小写问题。防御性代码：处理可能的空值，避免运行时错误。逻辑复用：将判断逻辑封装成方法或计算属性，提高代码复用性。