如何用 Vue 解释属性中的 html

Question

我需要将一些代码转换为 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>

Answer 1

您可以尝试以下代码段：

 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>