vue组件里面如何让pre和code标签里面的内容不被编译？

Question

例如：

<template>
    <pre>
        <code>
            <xxx-comp></xxx-comp>
            <div>test</div>
        </code>
    </pre>
</template>

最终显示为

一个组件
test

标签全没了，内容也被编译出来了

Answer 1

试试加上
v-pre

Answer 2

你是要原样输出html么？如果是的话可以用{{{内容}}}

Answer 3

日经问题：

含有特殊字符的字符串不想被HTML解析，请将它们转义。
具体来说就是这几个：

字符	十进制	转义字符
"	"	"
&	&	&
<	&#60;	&lt;
>	&#62;	&gt;
不断开空格(non-breaking space)	&#160;	&nbsp;

Answer 4

<div v-html="rawHtml"></div>

rawHtml = "<template>
    <pre>
        <code>
            <xxx-comp></xxx-comp>
            <div>test</div>
        </code>
    </pre>
</template>
"

Answer 5

<template>
  <pre>{{data}}</pre>
</template>

export default {
  data () {
    return {
      data: '<div></div>'
    }
  }
}

Answer 6

使用v-text:
<div v-text="htmlData"></div>
export defaul {
data(){

  return{
    htmlDate:'<xxx-comp></xxx-comp>
        <div>test</div>'
  }
}

}

Answer 7

我也遇到同样的问题，请问楼主解决了没？