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的奇怪转义行为

1 个答案: