v-html使用方法（v-html和v-text的区别是什么）

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1、v-html使用方法

v-html的目的是更新元素的 innerHTML。

注意：内容不会作为 Vue 模板进行编译，将以 HTML格式进行替换。

  Vue.config.productionTip = false
  new Vue({
    el: "#app",
    data: {
      "text": "Vue前端入门，第9节 v-text的简单学习",
      "link": "https://www.toutiao.com/a7054397948972548639/",
      "content": `Vue前端入门，第9节 v-text的简单学习`
    }
  })

结果：

需要注意的是：动态渲染 HTML 可能会导致 XSS 攻击。

2、v-html和v-text的区别

v-text：将获取到对应的内容，并清空原内容，输出的格式是纯文本。

v-html：将获取到对应的内容，并清空原内容，如果是内容的是文本内容，那么输出的格式是纯文本；如果内容包含html内容，那么将以html进行解析输出。

  
  
  
  



    
    
{{ text }}

    
    
{{ content }}
    
{{ link }}

    
    
    

    
    
    

https://hooper.eu.org/vue/3771.html