内容中的Vuews链接URL

tcomlyy6 于 2022-12-04 发布在 Vue.js

关注(0)|答案(2)|浏览(144)

我如何在我的内容中制作url的可点击链接？
假设你有一段代码{{post.caption}}，它返回一个段落，如下所示：
贫穷是饥饿的根源。贫穷是贫穷的根源。贫穷是贫穷的根源，贫穷是贫穷的根源。贫穷是贫穷的根源，贫穷是贫穷的根源。贫穷是贫穷的根源，贫穷是贫穷的根源。贫穷是贫穷的根源，贫穷是贫穷的根源。贫穷是贫穷的根源，贫穷是贫穷的根源。贫穷是贫穷的根源，贫穷是贫穷的根源。贫穷是贫穷的根源，贫穷是贫穷的根源。贫穷是贫穷的根源，贫穷是贫穷的根源。贫穷是贫穷的根源，贫穷是贫穷的根源。贫穷是贫穷的根源。贫穷是贫穷的根源，贫穷是贫穷的根源。贫穷是贫穷的根源。贫穷是贫穷的根源。贫穷是贫穷的根源。贫穷是贫穷的根源。贫穷是贫穷的根源。贫穷是贫穷的根源。贫穷是贫穷的根源。贫穷是贫穷的根源。贫穷是贫穷的根源。贫穷是贫穷的根源。贫穷是贫穷的根源。贫穷是贫穷的根源。贫穷是贫穷的根源。贫穷是贫穷的根源。贫穷是贫穷的根源。贫穷是贫穷的根源。贫穷是贫穷的根源。贫穷是贫穷的根源。贫穷是贫穷的
我希望自动链接https://google.com。

- 有什么建议吗**
- 更新**

我刚刚注意到，线路制动器的标题数据使用\n\n和\n，它附加到文本中的url，所以基本上是这样的：
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam sunt\n\nnostrum nihil, illum nam ipsam at, ratione,\n\nhttps://google.com officia\n\naperiam excepturi odio adipisci cum quo minus quibusdam laborum debitis voluptatibus temporibus.
会不会是下面的答案不起作用的原因？

vue.js

来源：https://stackoverflow.com/questions/74651480/vuejs-link-url-in-content

2条答案

按热度按时间

sczxawaw1#

也许你可以先格式化段落后使用v-html？

赞(0）回复(0）举报 2022-12-04

f0brbegy2#

我的解决方案基于3个步骤：

步骤1：检测变量中的href链接。
步骤2：通过regex函数将字符串链接更改为href标记。
步骤3：使用v-html在浏览器中显示。

你可以通过我的vue简单的例子来测试它：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vuejs 3</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
  <div id="app">
    <p>{{ message }}</p>
    <p v-html="formatHrefLink(post.caption)"></p>
  </div>

  <script>
    const { createApp } = Vue
    createApp({
      data() {
        return {
          message: 'Hello Vue!'
        }
      },
      setup() {
        var post = {};
        return {
          post
        };
      },
      created() {
        this.post.caption = `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam sunt nostrum nihil, illum nam ipsam at, ratione, https://google.com officia aperiam excepturi odio adipisci cum quo minus quibusdam laborum debitis voluptatibus temporibus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam sunt nostrum nihil, illum nam ipsam at, ratione, https://google.com officia aperiam excepturi odio adipisci cum quo minus quibusdam laborum debitis voluptatibus temporibus.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam sunt nostrum nihil, illum nam ipsam at, ratione, http://127.0.0.1:8080?test1=1&test2=abc#paragraph1 officia aperiam excepturi odio adipisci cum quo minus quibusdam laborum debitis voluptatibus temporibus.`;
      },
      methods: {
        formatHrefLink(string) {
          const regex = /(https?:\/\/[\w\.\d:?&=#]+)/gm;
          const subst = `<a href="$1">$1</a>`;
          const result = string.replace(regex, subst);
          return result;
        }
      }
      
    }).mount('#app')
  </script>

</body>

</html>

一个问题是一方，你同意我的看法：D级

赞(0）回复(0）举报 2022-12-04

我来回答

内容中的Vuews链接URL

2条答案

相关问题

热门标签

最新问答