在 HTML 块中显示在 v-model 中输入的 URL

Question

我正在尝试在 Vue 中创建代码片段生成器。

当我在文本框中输入 URL 时，我希望将 URL 插入到 HTML 模板中，可以将其复制并粘贴到 HTML 文档。这里的主要问题是将输出作为原始 HTML（就像您在 Medium 教程中的 <pre> 和 <code> 标签中看到的那样）。

我试过的代码 (CodePen):

<div id="app">
  <!--myurl:{{ myUrl }}-->
  'Purchase Link <br><a href="' + myURL + '">' + myURL + "</a>"

  <child v-model="myUrl" />
</div>

const Child = {
  name: 'Child',
  template: `
    <div class="input">
      <input :value="value" @input="$emit('input', $event.target.value)">
    </div>`,
  props: {
    value: String
  }
}

new Vue({
  el: '#app',
  components: {
    Child
  },
  data () {
    return {
      myUrl: ''
    }
  }
})

期望的结果：

<a href="https://amazon.com">amazon.com</a>

之前使用 AWS SES 和 Node，我将变量插入到代码块中作为 ${myURL}。不确定这种方法是否与 Vue 兼容。

Answer 1

您应该使用 v-bind 将数据绑定到 href

<div id="app">
  Purchase Link <br><a :href="myUrl"> {{ myUrl }} </a>
  <child v-model="myUrl" />
</div>

演示 codepen

Answer 2

使用 returns 所需 HTML 的计算属性，然后在应用 div 中打印它。在那里，如果需要，您还可以添加 http/s 前缀：

computed: {
  fixUrl() {
    return `<a href="${this.myUrl}">`
  }
}

codepen demo

Answer 3

据我所知，这就是您的要求：

const Child = {
  name: 'Child',
  template: `
    <div class="input">
      <input :value="value" @input="$emit('input', $event.target.value)">
    </div>
  `,
  props: {
    value: String
  }
}

new Vue({
  el: '#app',
  
  components: {
    Child
  },
  
  data () {
    return {
      myUrl: ''
    }
  },
  
  computed: {    
    shortUrl () {
      return this.myUrl.replace(/^https?:\/\//, '')
    }
  }
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <child v-model="myUrl"></child>
  <template v-if="myUrl">
    Purchase Link <br>
    <code>&lt;a href="{{ myUrl }}"&gt;{{ shortUrl }}&lt;/a&gt;</code>
  </template>
</div>

一旦您开始考虑相对路径，尝试规范化 URL 就非常棘手，所以我只保留了这一点。它只会从标签内显示的文本中删除 http:// 或 https://，而 href 与键入的完全相同。

在 HTML 块中显示在 v-model 中输入的 URL

Display URL entered in v-model within a HTML block

html

vue.js

vuejs2

pre

v-model