v-text:填充纯文本,相比插值表达式更简洁
v-html:填充html标签,存在安全问题,容易导致xss攻击
v-pre:填充原始信息,跳过编译过程,如:{{content3}}
代码示例:
<template> <div class="msg"> <div class="content1" v-text="content1"></div> <hr> <div class="content2" v-html="content2"></div> <hr> <div class="content3" v-pre>v-pre:填充原始信息,跳过编译过程,如:{{content3}}</div> <button @click="goHome()">返回第一页</button> <button @click="goPrew()">返回上一页</button> </div> </template> <script> export default { name: 'msg', data () { return { content1: 'v-text:填充纯文本,相比插值表达式更简洁', content2: 'v-html:<h1>填充html标签</h1><p>存在安全问题,容易导致xss攻击</p>', content3: '' } }, methods: { goHome () { this.$router.push('/') }, goPrew () { this.$router.go(-1) } } } </script> <style scoped> </style>