vue2.0怎么渲染html,vue采坑之——vue里面渲染html 并添加样式

在Vue2.0中渲染HTML有两种方式：v-html指令和使用组件。

1. v-html指令

v-html指令可以将一个字符串解析成HTML并渲染到页面上。例如：

<template>
  <div>
    <p v-html="content"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '<b>Hello World</b>'
    }
  }
}
</script>

这会将`<b>Hello World</b>`以加粗的形式渲染到页面上。

但是需要注意的是，v-html指令会将传入的字符串当做HTML代码直接解析并渲染，因此可能会存在XSS攻击的风险。因此，应该确保渲染的内容是可信的，或者对内容进行过滤和转义。

2. 使用组件

在Vue2.0中，可以通过创建组件的方式来渲染HTML。例如：

<template>
  <div>
    <my-html :content="content"></my-html>
  </div>
</template>

<script>
import MyHtml from './MyHtml.vue'

export default {
  components: { MyHtml },
  data() {
    return {
      content: '<b>Hello World</b>'
    }
  }
}
</script>

这里创建了一个名为`MyHtml`的组件，并将要渲染的HTML代码通过`content`属性传递给组件。组件的实现如下：

<template>
  <div v-html="content"></div>
</template>

<script>
export default {
  props: ['content']
}
</script>

这会将传入的HTML代码解析并渲染到页面上。需要注意的是，组件方式相对于v-html指令更安全，因为可以在组件内部对传入的HTML内容进行过滤和转义。