如何用Vue解释属性中的html

mrwjdhj3 于 2023-01-31 发布在 Vue.js

关注(0)|答案(1)|浏览(91)

我需要将一些代码转换为Vue，我在一个图像的alt属性中有一个渲染差异，因为我找不到解释属性中html的方法，我还没有找到任何讨论这个的主题，你有什么想法吗？
在我做的例子中，故意不放src来查看替代文本。

Vue.component('first-image', {
  inheritAttrs: false,
  template: '<div class="container-image"><img v-bind="$attrs"></div>'
});

Vue.component('second-image', {
  template: '<img>',
});

new Vue({
  el: '#app',
  data() {
    return {
       alternativeText: '1&nbsp;000€',
    };
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<!-- Without VueJS -->
<img alt="1&nbsp;000€">

<br>
<br>

<!-- With VueJS -->
<div id="app">
  <first-image :alt="alternativeText"></first-image>
  <second-image alt="1&nbsp;000€"></second-image>
</div>

vue.js

来源：https://stackoverflow.com/questions/75287042/how-to-interpret-html-in-an-attribute-with-vue

1条答案

按热度按时间

jpfvwuh41#

您可以尝试以下代码片段：

Vue.component('first-image', {
  inheritAttrs: false,
  template: '<div class="container-image"><img v-bind="$attrs"></div>'
});

Vue.component('second-image', {
  template: '<img>',
});

new Vue({
  el: '#app',
  data() {
    return {
       alternativeText: '1&nbsp;000€',
    };
  },
  methods: {
    decodeHtml(html) {
      const txt = document.createElement("textarea");
      txt.innerHTML = html;
      return txt.value;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<!-- Without VueJS -->
<img alt="1&nbsp;000€">

<br>
<br>

<!-- With VueJS -->
<div id="app">
  <first-image :alt="decodeHtml(alternativeText)"></first-image>
  <second-image alt="1&nbsp;000€"></second-image>
</div>

赞(0）回复(0）举报 2023-01-31

我来回答

如何用Vue解释属性中的html

1条答案

相关问题

热门标签

最新问答