<template>
<div class="test">
<p>{{html}}</p>
<p>{{msg}}</p>
<p v-text="msg"></p>
<p v-text="html"></p>
<p v-html="html"></p>
</div>
</template>
<script>
import {ref} from 'vue'
export default {
name : 'Test',
setup() {
let msg = ref('你管我')
let html = ref('<strong>我是谁</strong>')
return {
msg,
html
}
}
}
</script>
效果图
image.png
- 总结
{{}} v-text仅渲染数据，不会解析标签
v-html不仅渲染数据，还会解析标签
