Vue.js 的奇怪转义行为

Question

我使用此代码的目的是创建不同的标签，即下面的 item.tag：

<div v-for="item in items" :key="item.id">
    <{{item.tag}}>
        {{item.data}}
    </{{item.tag}}>
</div>

与items定义如下：

items: generateItems(2, i => ({
    id: 'item' + i,
    tag: 'hr',
    data: ''
}))

但是代码运行后 div 中的 HTML 逃脱了 < 和 >，即使它们不在 {{ }} 中，所以它看起来像这样：

&lt;hr&gt; &lt;/hr&gt;

但是如果我明确定义类型：

<div v-for="item in items" :key="item.id">
    <hr>
        {{item.data}}
    </hr>
</div>

<和>没有转义，横线显示没问题

我打算使用 hr 之外的其他标签，所以希望能够以某种方式使用 item.tag。

谁能解释一下这是怎么回事，是否有解决方法？

Answer 1

一种方法是使用 <component :is="tag"> 例如：

var demo = new Vue({
  el: '#demo',

  data() {
    return {
      tag: 'button',
      othertag: 'hr'
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div v-html id="demo">
  <component :is="tag">hello</component>
  <component :is="othertag"></component>
  
</div>

Vue.js 的奇怪转义行为

Strange escaping behaviour with Vue.js

node.js

handlebars.js

vue.js