<div v-text="msg"></div>
<!-- 文本插值 -->
<div>{{ msg }}</div>
<!-- 表达式 -->
<div>{{info+' 你好,世界'}}</div>
<!-- 三元表达式 -->
<div>{{sex === 0 ? '男生' : '女生'}}</div>
<!-- 转义输出 -->
<div v-text="<div>文本</div>"></div>
<!-- 解析输出 -->
<div v-html="<div>文本</div>"></div>
<!-- v-pre 含有该指令的标签内部的语法不会被vue解析 -->
<div v-pre>{{ msg }}</div>
元素内具有 v-pre
,所有 Vue 模板语法都会被保留并按原样渲染。最常见的用例就是显示原始双大括号标签及内容。
在网站上动态渲染任意 HTML 是非常危险的,因为这非常容易造成 XSS 漏洞。请仅在内容安全可信时再使用
v-html
,并且永远不要使用用户提供的 HTML 内容(script也属于HTML内容)。