vue js模板中的正则表达式答案

【问题标题】：Regex in vue js templatevue js模板中的正则表达式
【发布时间】：2021-02-03 20:41:56
【问题描述】：

你好，我有这个属性：文本，它包含一个 url，但作为纯文本。我想转换网址，以便它可以点击。

<template>
    <div>
        <button class="fas fa-angle-down jwsingle__player__text__toggle" @click="toggle" :class="{ 'jwsingle__player__text__toggle--active': isOpen }">
        </button>
        <div v-show="isOpen" class="jwsingle__player__text__description">
            {{ text }}
        </div>
    </div>
</template>
<script>    
    export default {
        name: 'jwplayer-text-toggle',
        props: {
            text: {
                type: String,
            },
        },
        data() {
            return {
                isOpen: false,
            }
        },
        methods: {
            toggle() {
                this.isOpen = !this.isOpen;
            }
        }
    }
</script>

【问题讨论】：

您需要一个<a :src="text">click me</a> 标签。如果它始终是 URL，您可能应该考虑将“text”重命名为“url”
@maxshuty 你的意思是<a :href="text"> :)
@tony19 doh，是的

标签： regex vue.js url hyperlink

【解决方案1】：

您似乎想创建一个链接，并将 URL 显示为文本。您可以执行以下操作：

<div v-show="isOpen" class="jwsingle__player__text__description">
  <a :href="text">{{ text }}</a>
</div>

:href 前面的: 很重要，因为它绑定了text 的prop 值，而不是字符串"text"。

【讨论】：