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

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: 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

相关文章
|
1天前
|
JavaScript
html / vue 自动生成目录
html / vue 自动生成目录
6 0
|
1天前
|
JavaScript UED
Vue.js 中的 `v-if`、`v-else-if` 和 `v-else`:条件渲染详解
Vue.js 中的 `v-if`、`v-else-if` 和 `v-else`:条件渲染详解
8 0
|
6天前
|
JavaScript 前端开发
Vue.js的`v-if`和`v-show`都用于条件渲染,但实现方式不同
【6月更文挑战第26天】Vue.js的`v-if`和`v-show`都用于条件渲染,但实现方式不同。`v-if`在条件为真时编译并渲染元素,不生成DOM时性能更高,适合不频繁切换的情况;而`v-show`初始总会渲染,通过CSS切换显示,适合频繁切换且需初始化渲染的场景,因其避免DOM重建。选择时应考虑元素显示的频率和初始状态。
14 5
|
7天前
|
缓存 监控 JavaScript
Vue3视图渲染技术(2)
Vue3视图渲染技术(2)
11 0
|
7天前
|
JavaScript 前端开发 C++
Vue3视图渲染技术(1)
Vue3视图渲染技术(1)
12 0
Vue3视图渲染技术(1)
|
7天前
|
JavaScript 索引
Vue.js的`v-for`用于基于数组或对象渲染列表,如遍历数组生成`&lt;li&gt;`元素
【6月更文挑战第25天】Vue.js的`v-for`用于基于数组或对象渲染列表,如遍历数组生成`&lt;li&gt;`元素。基本语法是`v-for=&quot;(item, index) in items&quot;`,支持遍历对象的键值对。注意与`v-if`同用时应使用`&lt;template&gt;`,组件上使用`v-for`需设`key`属性以优化性能。
16 2
|
7天前
Vue3——tdesign-vue-next如何按需加载动态渲染ICON
如题,在vue3中进行按需加载来动态的渲染icon图标;
9 1
|
8天前
|
JavaScript
VScode格式化vue文件--避免html属性换行
VScode格式化vue文件--避免html属性换行
18 0
|
11天前
|
JavaScript 前端开发
Vue躬行记(7)——渲染函数和JSX
Vue躬行记(7)——渲染函数和JSX