Vue 渲染内容 v-text 与 v-html

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: Vue 渲染内容 v-text 与 v-html

v-text 用于向所在的标签中渲染文本内容,不会解析标签。

v-html 也是用于向所在的标签中渲染文本内容,可以解析标签。

v-text 与 v-html 会替换掉标签中所有的内容,而插值语法不会。

注意:一定要在可信的内容上使用 v-html,永远不要用在用户提交的内容上,避免坏人利用动态渲染,获取用户的 cookie 进行 XSS 攻击。

使用v-text渲染内容:

<div id="APP">
  <p>你好,{{name}}</p>
  <p v-text="name">你好,</p>
</div>
const vm = new Vue({
  el: "#APP",
  data(){
    return {
      name: "张三"
    }
  }
});

注意:v-text 会替换掉标签中所有的内容,所以更推荐使用 {{ }} 插值语法。

另外,v-text 和 {{ }} 插值语法都不会解析字符串中的标签,例如:

<div id="APP">
  <p>你好,{{name}}</p>
  <p v-text="name">你好,</p>
</div>
const vm = new Vue({
  el: "#APP",
  data(){
    return {
      name: "<strong>张三</strong>"
    }
  }
});

 

使用v-html渲染内容

<div id="APP">
  <p>你好,{{name}}</p>
  <p v-html="name">你好,</p>
</div>
const vm = new Vue({
  el: "#APP",
  data(){
    return {
      name: "<strong>张三</strong>"
    }
  }
});

注意:v-html 可以解析标签,它和 v-text 一样都会替换掉标签中所有的内容。

 

原创作者:吴小糖

创作时间:2023.2.18

相关文章
|
2月前
|
前端开发
html渲染优先级
html渲染优先级
31 0
|
3月前
|
JavaScript
vue异步渲染
vue异步渲染
|
2月前
|
JavaScript 前端开发 安全
vue -- 指令 -- v-text/html/on/show/if/bind/for/model
【10月更文挑战第17天】Vue 指令是构建 Vue 应用的基础工具,掌握它们的特性和用法是成为一名优秀 Vue 开发者的重要一步。通过深入理解和熟练运用这些指令,可以打造出更加出色的前端应用。
80 50
|
3月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
3月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
1月前
|
监控 JavaScript 前端开发
Vue 异步渲染
【10月更文挑战第23天】Vue 异步渲染是提高应用性能和用户体验的重要手段。通过理解异步渲染的原理和优化策略,我们可以更好地利用 Vue 的优势,开发出高效、流畅的前端应用。同时,在实际开发中,要注意数据一致性、性能监控和调试等问题,确保应用的稳定性和可靠性。
|
3月前
|
JavaScript 前端开发
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
|
3月前
|
JavaScript 前端开发 API
Vue学习笔记7:使用v-for指令渲染列表
Vue学习笔记7:使用v-for指令渲染列表
|
2月前
|
JavaScript 前端开发 容器
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
218 0